网上许多ajax jquery 上传图片都要用到submit button， 请问如何上传并直接在本页看到当用户点击div？ 生死攸关问题，多谢先。
<code> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <body> <br> <div id="submit"> click me to pass the photo to upload.php</div> <div></div><style>#submit{ background-color: #ffcc99; display:inline-block; padding:5px; border-radius: 3px; cursor:pointer;}</style></code>
回复内容：
网上许多ajax*本文来@源gao@daima#com搞(%代@#码@网2
搞代gaodaima码
jquery 上传图片都要用到submit button， 请问如何上传并直接在本页看到当用户点击div？ 生死攸关问题，多谢先。
<code> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <body> <br> <div id="submit"> click me to pass the photo to upload.php</div> <div></div><style>#submit{ background-color: #ffcc99; display:inline-block; padding:5px; border-radius: 3px; cursor:pointer;}</style></code>
<code>#files { display:none; }document.querySelector('div[name="photoreturn"]').addEventListenr('click', function(evt) { evt.stopPropagation(); document.getElementById('files').click();}, false);</code>
不太明白题主意思，个人理解是不是想表单提交而不通过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){
<code> 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(){//错误时处理} });</code>
}
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：javascript – 当点击div（不是button)，如何实现图片 ajax／jquery上传并能直接看到，不用刷新网页
转载请注明原文链接：javascript – 当点击div（不是button)，如何实现图片 ajax／jquery上传并能直接看到，不用刷新网页
