问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Junjie
    711

    网上许多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>
    jqueryjavascriptphp
    阅读 8.1k
    6 个回答
    得票最新
    头像
    itlr
      1.2k116
      #files { display:none; }

document.querySelector('div[name="photoreturn"]').addEventListenr('click', function(evt) {
  evt.stopPropagation();
  document.getElementById('files').click();
}, false);
      头像
      pplgin
        3
        新手上路，请多包涵

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

        头像
        Eric_Huang
          25137

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

          头像
          驽马
            1.3k1311

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

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

            头像
            洋芋土豆
              1.1k54669
              头像
              枫陵露loid
                4812

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

                }

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题