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(){//错误时处理}
    });

}