JS上传文件和预览（单张和多张）

最新推荐文章于 2025-06-13 12:45:23 发布

原创最新推荐文章于 2025-06-13 12:45:23 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

JS上传文件专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JavaScript实现单张和多张文件的上传与预览功能。通过监听<input type='file'/>的onchange事件，获取文件并转换为预览的URL，设置到<img/>标签的src属性进行预览。同时，利用FormData对象和Ajax进行后台上传，并设置processData和contentType选项以确保上传数据的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Section1单张上传和预览：

思路：用<input type="file"/> 触发onchange事件，取出e.target.files || e.target.dataTransfer.files, 将其转为window.createObjectURL(file)有效的url 写入<img src=""/>的src中就可以预览了。然后将这个url用new FormData().append("",url); 设置ajax的processData:false,contentType:false;就可以上传到后台了。

请看代码：

<div class="facemain" id="facemain">
        <div class="viewface-container">
                <img class="viewfaceimg" id="viewfaceimg" src="../../../img/weixin/weixin-v2/faceimg-default.jpg"/>
        </div>

        <div class="faceupload-div">
                <label id="face_label" class="face-label"><input id="face_input" class="face-input" type="file">
                        拍照或选择相片
                </label>
                <span class="saveface-btn" id="saveface_btn">
                        保存
                </span>
        </div>
        <img class="face-closebtn" src="/newPage/img/weixin/weixin-v2/qcode-closebtn.png" @click.stop="closeFace"/>

</div>

js:

$("#face_input").on("change",function(obj){
        obj.stopPropagation();
        var $this = $(this);
        var files = obj.target.files || obj.dataTransfer.files;
        if(files.length > 1){
                files = files[files.length - 1];//取最后一张
                layer.msg('最多只能上传1张图片',{time:og.ogLayerTime,icon:5});
        }
        if (imgFilter(files) == false) {
                return false;
        }

        //判断上传的图片跟页面上的图片，如果已经上传了，不需要重新上传
        var img  = $("#viewfaceimg");//正在传的
        $.each(files, function (i, item) {//正在上传的files(item = 每一个file)

                var objUrl = getObjectURL(item);
                img.data("img",item);
                img.attr("src",objUrl);
        })
        $this.val("");//清空刚才选中的图片（PS:bug,因为若选中a，如果重新选择a，就不会再触发change事件所以必须要清空file）
        function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) {//基础创建url的方法
                        url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(file);
                }
                return url;
        };

        //图片过滤
        function imgFilter(files) {
                var a = true;
                for (var i = 0, len = files.length; i < len; i++) {
                        var file = files[i];
                        if (file.type.indexOf("image") == 0) {//
                                if (file.size >= 1048576) {// 1M
                                        layer.alert('您这张"' + file.name + '"图片过大，应小于1M，请重新上传');
                                        a = false;
                                }
                        } else {
                                layer.alert('文件"' + file.name + '"不是图片。请重新上传');
                                a = false;
                        }
                }
                return a;
        }
})

//保存头像
$("#saveface_btn").click(function(e){
        e.stopPropagation();
        var img = $("#viewfaceimg").data("img");
        var mydata = new FormData();
        mydata.append("headImage",img);
        if(og.isNotEmpty(img)){
          layer.load();
                $.ajax({
                        type:"post",
                        dataType:"json",
                        data:mydata,
                        cache:false,
                        processData: false,
                        contentType: false,
                        url:"/wx/user/uploadFace",
                        success:function(data){
                                if(data.status){
                                        layer.msg('恭喜您上传成功。',{time:og.ogLayerTime,icon:6});
                                        //location.href = "/newPage/html/weixin/weixin-v1/myinfo.html";
                                        return false;
                                }else{
                                        layer.alert(data.message);
                                        return false;
                                }
                        },
                        complete:function(){
                              layer.closeAll("loading");
                        }
                })
        }else{
                layer.msg('请您先选择一张图片。',{time:og.ogLayerTime,icon:5});
                return false;
        }
})