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

Source: Internet
Author: User
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(){//错误时处理}    });

}

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.