JavaScript-When you click the div (not the button), how to implement the picture Ajax/jquery upload and can see directly, do not refresh the page

Online many Ajax jquery upload images to use the Submit button, how to upload and see directly on this page when users click on the div? Life and death problems, more Mr. Chia.

                        
   click me to pass the photo to upload.php  

Reply content:

Online many Ajax jquery upload images to use the Submit button, how to upload and see directly on this page when users click on the div? Life and death problems, more Mr. Chia.

                        
   click me to pass the photo to upload.php  

#files { display:none; }document.querySelector('div[name="photoreturn"]').addEventListenr('click', function(evt) {  evt.stopPropagation();  document.getElementById('files').click();}, false);

Do not understand the main meaning of the topic, personal understanding is not to submit the form to the trigger? Use H5 Formdata to try

1, can after the last success, send an AJAX request to request the picture content and then display
2, get the local path to upload the picture, and then cache it, click Upload Successful display (through the files of input can get to the path of the picture)

If you just want to preview the picture, you can try the HTML5 FileReader.

If you want to not refresh the current page, upload an image to the server and then display it on the page, it can be uploaded using an iframe. The specific principle is to build a hidden iframe, the image is passed to the form in the IFRAME upload. Then add the image to the page in the completed callback function.

Come up with a simple plan to see if it suits your appetite;

Php+iframe No refresh Upload

Two methods
1.file control, using FileReader Preview to upload images to the browser, but did not submit to the server.
The 2.file control (set transparent and absolutely positioned on the div layer you want) uploads, Ajax uploads form data, and the callback image appears where you want it to appear.

Paste the second method part of the code:
function Inputchanges (self) {

    var tmp_name = self.attr('name');    var myform = document.createElement("form");    myform.action = "后台处理地址";    myform.method = "post";    myform.enctype = "multipart/form-data";    myform.style.display = "none";    document.body.appendChild(myform);    var form = $(myform);    var clone = self.clone();    clone.val("");    self.parent().append(clone);    clone.bind("change",function(){        var self = $(this);        inputchanges(self);    });    var fu1 = self.appendTo(form);    form.ajaxSubmit({        success: function (data) {            //写上自己想要的结果        }，        error:function(){//错误时处理}    });

}

