javascript完成图片伪异步上传

2024年3月26日 113次阅读 来源: rand

完成逻辑

起首要知道， ajax没法发送带有文件的post要求所以，所以照样要用同步的体式格局，然则革新的时刻，我们不要在本来的页面革新，去一个隐蔽的iframe内里革新，form表单中action平常填写处置惩罚文件上传的操纵。紧着着的target填写一个隐蔽的iframe。 如许表单提交以后，文件会被上传，被革新页面为隐蔽的iframe，因而用户看到的结果和ajax处置惩罚的结果是一样的。

dom构造

在这里有两个须要注重的处所，一是iframe是隐蔽的，对用户不可见。二是form的target属性就是iframe的id属性，必需确保这个处所的一致，不然猎取不到服务器的回传地点

<form action="#" method="post" enctype="multipart/form-data" target="hidden_frame"  id='upload'>
    <input type="file" name="pic" accept="image/gif;image/jpg;" />
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" style='display:none'></iframe>

图片预览

平常在图片上传之前，我们愿望用户能够预览到上传以后的模样，这里有两种处置惩罚体式格局。一个是等图片上传胜利以后，服务器返回图片的地点，将图片显现，因为中心的时间差很小，给用户一种错觉彷佛真的是在预览。第二种体式格局是在图片上传之前，猎取input中的当地图片地点，然后显现，因为是显现当地的图片，所以没有时间差，完成真正的预览。简朴的逻辑逻辑代码以下

$("#userHeadImg").change(function(event) {                    
     var file = $(event.target)[0].files[0];
     var src = URL.createObjectURL(file);
     if(file){
        //示意猎取到了图片
     }else{
        //示意点击了作废
     }
     //这里的src就是图片的地点，将它放在恣意一个img标签的src属性内里      
});

最先上传

在onchange事宜内里促发form的submit事宜，上传图片

$("#upload").submit();

猎取服务器回传的图片url

服务器将地点返回到iframe，iframe会被革新。运用js监听iframe的onload，一旦有onload发作，就示意服务器回传了信息

var imgsrc=$(this).contents().find("pre").text();

增添上传文件范例限定

accept="image/gif;image/jpg;"

思索

这类体式格局关于单张图片上传没有问题，如果是多张，该如何优化?

    原文作者：rand
    原文地址: https://segmentfault.com/a/1190000004064879
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞