当点击div(不是button),如何实现图片 ajax/jquery上传并能直接看到,不用刷新网页


网上许多ajax jquery 上传图片都要用到submit button, 请问如何上传并直接在本页看到当用户点击div? 生死攸关问题,多谢先。


 <html>
    <head>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>

  <input multiple class="fileInput" type="file" id="files" name="files[]"/>
  <br>
  <div id="submit" > click me to pass the photo to upload.php</div>
  <div name="photoreturn"></div>
</body>
</html>



<style>
#submit{
    background-color: #ffcc99;
    display:inline-block;
    padding:5px;
    border-radius: 3px;
    cursor:pointer;
}
</style>

jquery php JavaScript

杰克比利2 9 years, 5 months ago

如果你只是想预览图片,可以试下HTML5的 FileReader。


如果你是想不刷新当前页面,上传一个图片到服务器,然后在页面上显示,那可以采用iframe上传。具体原理就是建一个隐藏的iframe,将图片传递给iframe中的form上传。然后在上传完毕的回调函数中添加图片到页面。

受受天然呆 answered 9 years, 5 months ago

1、可以在上次成功后,再发一个ajax请求去请求图片内容然后显示
2、获取要上传图片的本地路径,然后缓存起来,点击上传成功就显示(通过input的files是可以获取到图片的路径的)

85214 answered 9 years, 5 months ago

不太明白题主意思,个人理解是不是想表单提交而不通过submit触发?采用H5的FormData试下

孩子de弟弟 answered 9 years, 5 months ago


 #files { display:none; }

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

maplew answered 9 years, 5 months ago

Your Answer