Uložení obrázku ajaxem – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Mám 

udělaná file input na nahrání obrázku

 <form role="form" id="image-form" enctype="multipart/form-data" onSubmit="return false;">
                                    <div class="image-container">
                                        <img src="http://placehold.it/150x150" id="imgProfile" style="width: 150px; height: 150px" class="img-thumbnail" />
                                        <div class="middle">
                                            <input type="button" class="btn btn-secondary" id="btnChangePicture" value="Change" />
                                            <input type="file" style="display: none;" id="profilePicture" name="file" accept=".png, .jpg, .jpeg" />
                                        </div>
                                    </div>
                                </form>

který zpracovává tento ajax

   $(document).ready(function () {
            $imgSrc = $('#imgProfile').attr('src');
            function readURL(input) {

                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#imgProfile').attr('src', e.target.result);
                    };

                    reader.readAsDataURL(input.files[0]);

                }
            }
            $('#btnChangePicture').on('click', function () {
                // document.getElementById('profilePicture').click();
                if (!$('#btnChangePicture').hasClass('changing')) {
                    $('#profilePicture').click();
                }
                else {
                    $.nette.ajax({
                        type: "POST", // nebo GET, záleží na tobě a na tvém využití
                        url: {link imageUpload!},
                        data: { file: new FormData($("#image-form")[0]) },
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            alert('ok');
                        },
                        error: function (textStatus) {
                            alert("Error: " + textStatus);
                        }
                    });
                }
            });
            $('#profilePicture').on('change', function () {
                readURL(this);
                $('#btnChangePicture').addClass('changing ajax');
                $('#btnChangePicture').attr('type', 'submit');
                $('#btnChangePicture').attr('value', 'Confirm');
                $('#btnDiscard').removeClass('d-none');
                // $('#imgProfile').attr('src', '');

            });
            $('#btnDiscard').on('click', function () {
                // if ($('#btnDiscard').hasClass('d-none')) {
                $('#btnChangePicture').removeClass('changing');
                $('#btnChangePicture').attr('value', 'Change');
                $('#btnDiscard').addClass('d-none');
                $('#imgProfile').attr('src', $imgSrc);
                $('#profilePicture').val('');
                // }
            });
        });

Ale mám problém že prostě se mi nic nepošle... dle nějakých návodůl jsem narazil na file: new FormData($("#image-form")[0]) ale nic..

Můžete mi poradit?

Jistý si nejsem, ale řekl bych, že to bude 

data: new FormData($("#image-form")[0]),

A tohle je podle mě úplný nesmysl, ale moderní JavaScript neznám, tak nevím. 

url: {link imageUpload!},

#2 gna

Tohle jsem zkoušel a nic když si nechám vypsat do konzole  

FormData {}
__proto__: FormData
append: ƒ append()
delete: ƒ delete()
entries: ƒ entries()
forEach: ƒ forEach()
get: ƒ ()
getAll: ƒ getAll()
has: ƒ has()
keys: ƒ keys()
set: ƒ ()
values: ƒ values()
constructor: ƒ FormData()
Symbol(Symbol.iterator): ƒ entries()
Symbol(Symbol.toStringTag): "FormData"
__proto__: Object

Ale nic se mi nepřenese...

#3 gna

url: {link imageUpload!}

To je z nette reálně ten odkaz vypadá url: "\/projects\/pteam\/setting\/?do=imageUpload" ale na tu metodu mi t normálně zavolá ale nedojde do ní ten parametr files.

Tohle pouzivam pro upload souboru v poslednim projektu

<a id="pril_add"></a>
<h2>Seznam příloh</h2>

<div><small class="form-text text-muted">Rozhodnutí, dodatky k rozhodnutí, interní smlouva, Memorandum, dodatky</small></div>

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="pril2_nav">
      <li class="nav-item"><a class="nav-link active" href="#file" onclick="FL.buttonFileInsert(); return false;">Soubor</a></li>
      <li class="nav-item"><a class="nav-link" href="#link" onclick="FL.buttonLinkInsert(); return false;">Odkaz</a></li>
    </ul>
  </div>

  <div class="card-body">

    <div id="insert_file">
      <form action="{program}" method="post" enctype="multipart/form-data" id="uploadfileform">
        <input type="hidden" name="MAX_FILE_SIZE" value="{upload_max_size}"> 
        <input type="hidden" name="what"   value="{what}">
        <input type="hidden" name="do"     value="insert">
        <input type="hidden" name="idform" value="{form_idform}">
        <input type="hidden" name="idtmp"  value="{form_idtmp}">
        <input type="hidden" name="type"   value="file">
        <div id="dropzone" class="alert">
          <div class="message"><b>Drag and drop</b> files here<br> or <a href="" id="triggerFile">browse</a> to begin the upload</div>
          <input type="file" multiple="multiple" name="files_to_upload[]">
        </div>
        <div class="list-files">
        </div>
      </form>
    </div>

    <div id="update_file">
      <form action="{program}" method="post" enctype="multipart/form-data" id="updatefileform">
        <input type="hidden" name="what"   value="{what}">
        <input type="hidden" name="do"     value="update">
        <input type="hidden" name="idpril" value="{form_idpril}">
        <input type="hidden" name="idform" value="{form_idform}">
        <input type="hidden" name="idtmp"  value="{form_idtmp}">
        <input type="hidden" name="type"   value="file">
      
        <table class="table-sm">
          <colgroup>
            <col style="width:160px;">
            <col>
            <col>
          </colgroup>
          <tbody valign="top">
            <tr>
              <td><label for="name">Název</label></td>
              <td><input value="{form_name}" id="name" name="name" size="47" type="text" class="form-control form-control-sm {err_input_name}"></td>
              <td>{err_name}</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input value=" Uložit " type="submit" class="submit btn btn-secondary"></td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>

    <div id="insert_link">
      <form action="{program}" method="post" enctype="multipart/form-data" id="insertlinkform">
        <input type="hidden" name="what"   value="{what}">
        <input type="hidden" name="do"     value="{do}">
        <input type="hidden" name="idpril" value="{form_idpril}">
        <input type="hidden" name="idform" value="{form_idform}">
        <input type="hidden" name="idtmp"  value="{form_idtmp}">
        <input type="hidden" name="type"   value="link">
      
        <table class="table-sm">
          <colgroup>
            <col style="width:160px;">
            <col>
            <col>
          </colgroup>
          <tbody valign="top">
            <tr>
              <td><label for="name">Název</label></td>
              <td><input value="{form_name}" id="name" name="name" size="47" type="text" class="form-control form-control-sm {err_input_name}"></td>
              <td>{err_name}</td>
            </tr>
            <tr>
              <td><label for="link">Url</label></td>
              <td><input value="{form_link}" id="link" name="link" size="47" type="text" class="form-control form-control-sm {err_input_link}"></td>
              <td>{err_link}</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input value=" Uložit " type="submit" class="submit btn btn-secondary"></td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>

  </div>






<!-- list -->
{content_list}



<style>
#insert_file #dropzone {border:2px dashed #818182;  background-color:#e2e3e5;}	/*#004085 #b8daff*/
#insert_file #dropzone div.message {color:#383d41;}
#insert_file #dropzone.active {border-color:#155724; background-color:#d4edda;}
#insert_file #dropzone.active div.message {color:#155724;}
#insert_file #dropzone input {visibility: hidden;}
</style>

<script>
//
//#dropzone {border:3px dotted #155724;  background-color:#d4edda;}	/*#004085 #b8daff*/
//#dropzone div.message {color:#155724;}
//#dropzone.active {border-color:#856404; background-color:#fff3cd;}
//#dropzone.active div.message {color:#856404;}
//#dropzone input {visibility: hidden;}

//DOM
const $ = document.querySelector.bind(document);

UPLOAD = {};
UPLOAD.vars = {};
UPLOAD.showFileList = function (files)
	{
/*
	var i, files, d, div, item;
	for (i=0; i<files.length; i++)
		{
		div  = document.createElement("div");
		item = files[i];
		d    = item.lastModifiedDate ? item.lastModifiedDate : (item.lastModified ? new Date(item.lastModified) : '');
		d    = d!=='' ? (d.toLocaleDateString ? d.toLocaleDateString() : d) : 'n/a';
		div.innerHTML = item.name +' (' + 
				(item.type || 'n/a') + ', ' +
				item.size + ' bytes, last modified: ' +
				d + ')';
		$(UPLOAD.id.list_files).appendChild(div);
		}
*/
	}

UPLOAD.handleFileSelect = function (event)
	{
	var files, form;
	files = event.target.files; // FileList object
	event.preventDefault();
	form = UPLOAD.vars.form;
	form['do'].value = 'insert';
	form.submit();
//	UPLOAD.showFileList(files);
	}

UPLOAD.init = function()
	{
	var id = {
		form: "#uploadfileform",
		link_browse: "#triggerFile",
		input_file: "input[type=file]",
		drop_zone: "#dropzone",
		list_files: ".list-files"
		};
//for (i in id)	{alert($(id[i]))}
	UPLOAD.id = id;
	UPLOAD.vars.form = $(id.form);
	// trigger input
	$(id.link_browse).onclick = function (event)
		{
		event.preventDefault();
		$(id.input_file).click();
		};
	// input change
	$(id.input_file).onchange = UPLOAD.handleFileSelect;

	// drop events
	var dropzone = $(id.drop_zone);
	dropzone.ondragleave = function (event)
		{
		event.preventDefault();
		dropzone.classList.remove("active");
		};
	dropzone.ondragenter = function (event)
		{
		event.preventDefault();
		dropzone.classList.add("active");
		};
	dropzone.ondragover = dropzone.ondragenter;
	dropzone.ondrop = function (event)
		{
		var form;
		event.preventDefault();
		dropzone.classList.remove("active");
		$(id.input_file).files = event.dataTransfer.files;
		form = UPLOAD.vars.form;
		form['do'].value = 'insert';
		form.submit();
//		UPLOAD.showFileList(event.dataTransfer.files);
		};
	UPLOAD.vars.dropzone = dropzone;
	}




var FL = {};
FL.vars = {};
FL.show = function(id)
	{
	var id_list, id_nav, type, query;
	id_nav  = FL.vars.id['nav'];
	id_list = FL.vars.id_list;
	for (i in id_list)
		{
		if (typeof $('#'+id_list[i])==null)
			{continue;}
		$('#'+id_list[i]).style.display = "none";
		type  = id_list[i].replace(/^.*?_/g,'');
		query = '#'+id_nav+' a[href="#'+type+'"]';
		$(query).classList.remove('active');
		}
	if (typeof id_list[id]!='undefined' && $('#'+id_list[id])!=null)
		{
		$('#'+id_list[id]).style.display = "";
		type  = id_list[id].replace(/^.*?_/g,'');
		query = '#'+id_nav+' a[href="#'+type+'"]';
		$(query).classList.add('active');
		return $('#'+id_list[id]);
		}
	return false;
	}

FL.buttonUpdate = function(type, a, b, c)
	{
	if (type=='link')
		{
		FL.buttonLinkUpdate(a, b, c);
		}
	if (type=='file')
		{
		FL.buttonFileUpdate(a, b, c);
		}
	}

FL.buttonLinkInsert = function()
	{
	var el, code, type, query;
	type = 'link_insert';
	el = FL.show(type);
//	code = FL.vars.code['link_insert']
//		.replace('{form_idpril}', '')
//		.replace('{form_name}'  , '')
//		.replace('{form_link}'  , '');
//	el.innerHTML = code;
	query = '#'+FL.vars.id_list[type]+ ' input[name="';
	$(query+'do'+'"]'    ).value = 'insert';
	$(query+'idpril'+'"]').value = '';
	$(query+'name'  +'"]').value = '';
	$(query+'link'  +'"]').value = '';
	}

FL.buttonLinkUpdate = function(id, name, url)
	{
	var el, code, query, type;
	type = 'link_update';
	el   = FL.show(type);
//	code = FL.vars.code['link_update']
//		.replace('{form_idpril}', id)
//		.replace('{form_name}'  , name)
//		.replace('{form_link}'  , url);
//	el.innerHTML = code;
	query = '#'+FL.vars.id_list[type]+ ' input[name="';
	$(query+'do'+'"]'    ).value = 'update';
	$(query+'idpril'+'"]').value = id;
	$(query+'name'  +'"]').value = name;
	$(query+'link'  +'"]').value = url;
	}

FL.buttonFileInsert = function()
	{
	FL.show('file_insert');
	}

FL.buttonFileUpdate = function(id, name, none)
	{
	var el, code, query, type;
	type = 'file_update';
	el   = FL.show(type);
//	code = FL.vars.code['file_update']
//		.replace('{form_idpril}', id)
//		.replace('{form_name}'  , name);
//	el.innerHTML = code;
	query = '#'+FL.vars.id_list[type]+ ' input[name="';
//alert([$(query+'name'  +'"]'), name])
	$(query+'idpril'+'"]').value = id;
	$(query+'name'  +'"]').value = name;
	}




/*
FL.buttonClose = function()
	{
	$(FL.vars.id.FL).innerHTML = '';
	}

FL.buttonSave = function(form1)
	{
	form1.submit();
//		form2 = UPLOAD.vars.form;
//		form2['do'].value = 'update';
//		form2.submit();
	}
*/
FL.init = function()
	{
	var id_list, code_list;
	id_list = {
		'link_insert': 'insert_link',
		'link_update': 'insert_link',
		'file_insert': 'insert_file',
		'file_update': 'update_file'
		};
//	for (i in id_list)
//		{
//		if (typeof $('#'+id_list[i])==null)
//			{continue;}
//		code_list[i] = $('#'+id_list[i]).innerHTML;
//		}
	FL.vars.id_list   = id_list;
	FL.vars.id   = {
		'nav': 'pril2_nav'
		};
//	FL.vars.code = code_list;
	
	FL.show('file_insert');
	}


UPLOAD.init();
FL.init();

</script>

Mam to teda v iframu, takze odesilam form a po obnoveni mi tam php doda seznam souboru propojenych s idform nebo idtmp (podle toho, zda uz uzivatel klikl na  ulozit projekt nebo jeste je teprve v editaci v casti NEW).