首頁 > 後端開發 > php教程 > javascript - 当点击div(不是button),如何实现图片 ajax/jquery上传并能直接看到,不用刷新网页

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

WBOY
發布: 2016-06-06 20:27:04
原創
1281 人瀏覽過

网上许多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>
    
    

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





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

回复内容:

网上许多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>
    
    

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





<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>
登入後複製

}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板