javascript - 當點擊div（不是button)，如何?圖片 ajax／jquery上傳並能直接看到，不用重新整理網頁

網上許多ajax jquery 上傳圖片都要用到submit button， 請問如何上傳並直接在本頁看到當使用者點擊div？ 生死攸關問題，多謝先。

                        
   click me to pass the photo to upload.php  

回複內容：

網上許多ajax jquery 上傳圖片都要用到submit button， 請問如何上傳並直接在本頁看到當使用者點擊div？ 生死攸關問題，多謝先。

                        
   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);

不太明白題主意思，個人理解是不是想表單提交而不通過submit觸發？採用H5的FormData試下

1、可以在上次成功後，再發一個ajax請求去請求圖片內容然後顯示
2、擷取要上傳圖片的本地路徑，然後緩衝起來，點擊上傳成功就顯示（通過input的files是可以擷取到圖片的路徑的）

如果你只是想預覽圖片，可以試下HTML5的 FileReader。

如果你是想不重新整理當前頁面，上傳一個圖片到伺服器，然後在頁面上顯示，那可以採用iframe上傳。具體原理就是建一個隱藏的iframe，將圖片傳遞給iframe中的form上傳。然後在上傳完畢的回呼函數中添加圖片到頁面。

來個簡單的方案，看看適不適合你的胃口；

PHP+iFrame無重新整理上傳

兩種方法
1.file控制項，利用FileReader預覽上傳至瀏覽器的圖片，但並沒有提交至伺服器。
2.file控制項(設定透明並絕對位置在你想要的div層上)上傳，ajax上傳form的表單資料，並回調圖片顯示在你想顯示的地方。

貼上第二種方法部分代碼：
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(){//錯誤時處理}    });

}

