精华内容
下载资源
问答
  • js input file图片上传,一次性上传多张图片(前端预览功能); 运用js实现上传图片前的预览(支持多张图片),网上很多案例都是没有处理每个上传的图片文件名,这里我就增加了图片文件名的方法,希望亲们可以在...

    js input file 多图片上传,一次性上传多张图片(前端预览功能);

    • 运用js实现上传图片前的预览(支持多张图片),网上很多案例都是没有处理每个上传的图片文件名,这里我就增加了图片文件名的方法,删除对应图片的方法,希望亲们可以在项目中用到…
    • 删除对应图片记得要清除inputfile里面的value,否则同名的图片只能上传1次;
    • 其他input file多文件方法类似,用到FileReader读取文件的方式…

    先来个效果图:
    在这里插入图片描述
    因为原生js结构比较麻烦,就写了一个基于vue的方法…
    html结构:

    
    <section id="vue-imgUpload">
        <div class="upload-pic">
            <label class="up-lab" for="add-pic-btn">上传图片集</label>
            <input type="file" accept="image/*" multiple class="up-file" id="add-pic-btn" @change="addImg()">
        </div>
        <div class="group-coms-pic" v-if="list.length>0" v-cloak>
            <div class="item" v-for="(v,i) in list" :key="i" >
                <div class="pic-box">
                    <img class="img" :src="v.src">
                </div>
                <div class="tk">{{v.name}}</div>
                <span class="del" @click="delImg(i)">x</span>
            </div>
        </div>
    </section>
    

    js功能:

    //vueImgUpload
        const vueImgUpload = new Vue({
            el: '#vue-imgUpload',
            data(){
                return{
                    list:[], //用于结构渲染
                    allArr:[],  //存储每次上传的所有flie,
                    limitNum:3, //限制数量
                }
            },
            methods:{
                //添加图片
                addImg(){
                    let that = this;
                    var obj = that.getId('add-pic-btn'),
                        obArr =  obj.files,
                        length = obArr.length,
                        arr = [],
                        limitNum = that.limitNum;
                    for(let x of obArr){
                        var params = {name: x.name, src:''};
                        arr.push(params);
                    }
                    that.allArr = [...that.allArr,...arr];
                    //定义一个函数作回调
                    const Pro = function () {
                        return new Promise(function (resolve, reject) {
                            arr.forEach((v,i,array)=>{
                                resolve(array)
                            });
                        })
                    };
                    Pro().then((newArr)=>{
                        // console.log(newArr);
                        for(let i=0; i<newArr.length; i++) {
                            var reader = new FileReader();
                            if (!reader) {
                                console.log('对不起,您的浏览器不支持!请更换浏览器试一下');
                                return
                            }
                            //读取成功
                            reader.onload = function(e) {
                                // console.log(e)
                                var _src = e.target.result;
                                newArr[i].src = _src;
                                that.clearVal();
                            };
                            reader.onloadstart=function(){
                                console.log('开始')
                            };
                            reader.onprogress=function(e){
                                if(e.lengthComputable){
                                    console.log("正在读取文件")
                                }
                            };
                            reader.error = function(){
                                console.log("读取异常")
                            };
                            reader.readAsDataURL(obj.files[i]);
                        }
                        //合并数组,先合并在删除多余;
                        var len1 = that.list.length,
                            len2 = newArr.length;
                        var d = [...that.list,...newArr];
                        that.list = d;
                        // console.log(len1,len2,d)
                        if(d.length > limitNum){
                            alert(`最多只能上传${limitNum}张图片`);
                            that.list.splice(limitNum,d.length-limitNum);
                            // console.log(that.list)
                        }
                    });
                },
                //删除图片
                delImg(i){
                    var flag = confirm(`确认要删除名为:${this.list[i].name}的图片?`);
                    if(flag) {
                        this.list.splice(i,1);
                        this.allArr.splice(i,1);
                    }
                    //这个得清空,不然全部被删除后,无法再次上传同一图片
                   if(this.list.length<=0){
                       this.clearVal();
                   }
                },
                //每次上传完清除一下value
                clearVal(){
                    this.getId('add-pic-btn').value = null;
                },
                //dom
                getId(id){
                    return document.getElementById(id);
                }
            }
        })
    

    有什么错误或优化的地方,可以提出来,大家一起学习研究…

    在这里插入图片描述

    展开全文
  • 页面只有一个input file按钮,一个确认上传按钮,要求:次点击上传,吧图片信息保存入集合,点击确认按钮,上传所有图片 次点击这一个按钮上传图片,在js中保存为集合,但是遇到一个问题,当我点击第二次的时候...

    页面只有一个input file按钮,一个确认上传按钮,要求:多次点击上传,吧图片信息保存入集合,点击确认按钮,上传所有图片

    多次点击这一个按钮上传图片,在js中保存为集合,但是遇到一个问题,当我点击第二次的时候,传过来的this信息会顶替掉上一次的this信息,

    也就是:上传两次,集合中有两组数据,但是这两组数据都为最后一次点击的信息。

    我需要的结果为:上传两次,集合中有两组数据,每组数据为每次上传的图片所有信息(相当于每次传过来的this数据)。

    在网上查了许久,也没有改正过来,幸运的是,找到的最终的解决方案:

    直接上核心代码:

    <span>选择图片</span>
    <input οnchange="fileUp(this)" id="file-up" type="file"  accept="image/*" >//点击上传,这里是我们需要添加的方法,每次点击执行
    <a href="javascirpt:void(0)" οnclick="upimg();" >确定上传</a>//这里可以写自己上传的ajax方法
    
    <script type="text/javascript">
    	var dellist=new Array();//接收的集合
    
    	var fileUp = function(thisvar) {//每次传过来的this
    		re_me = $.extend(true,{},thisvar);//这里是重点!敲黑板!
    		dellist.push(re_me);//添加进集合中
    	}
    </script>


    走到这一步 保存为集合已经完成


    扩展:上传步骤
    var fd = new FormData();//定义一个存放图片信息地方
    for(var i=0;i<=dellist.length;i++){
    	fd.append("file",dellist);//遍历集合,放入存放图片的formdata中
    }


    //自己定义的上传方法

    function uping(){
    $.ajax({
    		url : 'XXXXX',//访问后台的上传方法路径
    		data : fd,       //保存的formdata集合
    		type : 'POST',
    		cache : false,
    		processData : false,
    		contentType : false,
    		beforeSend : function(data) {
    			//加载中事件
    			var loading = $('#fountainG');
    			loading.show();                    //id为fountainG的div,里面存放着一张加载中的动态图片
    		},
    		success : function(data) {
    			//执行成功事件,并关闭加载中事件
    			var loading = $('#fountainG');
    			loading.hide();
                    	alert("上传成功");  
           
    		},
    		error : function(data) {
    			//错误返回事件
    			var loading = $('#fountainG');
    			$('#image-list').html("");//展示列表为空
    			loading.hide();//关闭加载中图片
    			alert(data);
    		}
    	});
    }


    后台接收的方法
     

    @RequestMapping(value = "/upload.do")  
    	    public @ResponseBody String upload(@RequestParam(value = "file") CommonsMultipartFile[] files, String phone, String[] imgName) {  //上传图片
    		 return picService.insertPic(phone,files,teacherUrl,imgName);
    	    } 


    @Override
    	@Transactional
    	public String insertPic(String phone, CommonsMultipartFile[] files, String teacherUrl, String[] imgName) {
    		// TODO Auto-generated method stub
    		try {  
    			for(int i = 0;i<files.length;i++){  
    				 MultipartFile file = files[i];
    				 String path = teacherUrl;  
    			        String fileName = file.getOriginalFilename(); 
    			        if (fileName==null || "".equals(fileName) || phone==null || "".equals(phone)) {
    						return "fail"; 
    					}
    			        boolean mark = true;
    			        if (imgName != null && imgName.length>0) {
    			        	for (String n : imgName) {//如果相片名称在删除名称集合中,则不保存
    							if (fileName.equals(n)) {
    								mark=false;
    								break;
    							}
    						}
    					}
    			        if (mark) {
    			        	 File targetFile = new File(path+File.separator+phone, phone+"_"+fileName);  
    				        if(!targetFile.exists()){  
    				            targetFile.mkdirs();  
    				            picDao.insertPic(phone+"_"+fileName,phone);//如果照片没有上传保存记录
    				        } 
    				        //保存  
    				        file.transferTo(targetFile);  
    					}
    			 }
            } catch (Exception e) {  
            	e.printStackTrace();
                return "fail";  
            }
    		return "sucess";
    	}
    


    展开全文
  • 我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就...
  • 之前写过上传图片的相关需求,回显是图片上传到服务器后返回的路径,这回来个不一样的,选择图片之后直接用js的内置文件流回显出来再在form表单里同一提交数据,上传图片,接下来上代码 //样式就不写了,各位喜欢...

    之前写过上传图片的相关需求,回显是图片上传到服务器后返回的路径,这回来个不一样的,选择图片之后直接用js的内置文件流回显出来再在form表单里同一提交数据,上传图片,接下来上代码

    //样式就不写了,各位喜欢什么样式自己写,或者直接找个前端框架都有了
    HTML:
    <form id="myForm" method="post" enctype="multipart/form-data" >
        <p>选择图片</p>
        <!--
            accept:可接受文件类型,不写就是可以上传所有文件
            多选图片上传的话一定要带上multiple属性,或者multiple = "multiple"
          -->
        <input type="file" accept="image/jpeg,image/png" multiple name="file" onchange="previewFile()"/>
        <!--回显图片的地方-->
        <div id="imgDiv"></div>
        <button onClick="doSubmit();" type="button">确认</button>
    </form>
    
    JavaScript:
    <script type="text/javascript">
        function previewFile() {
            //清空回显区域,否则每次都会向后拼接
            $("#imgDiv").html("");
            //获取文件对象
            var file = document.querySelector('input[type=file]').files;
            if (file) {
                //如果有对象,向下执行
                if (file.length == 1) {
                    //如果只选择一张图片,直接通过js内置文件流回显出来
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        var html = "<img src="+reader.result+" />";
    		    $("#imgDiv").html(html);
                    }
                    reader.readAsDataURL(file[0]);
    	    } else if (file.length > 1) {
                    //多张图片,循环回显
                    for (var i = 0; i < file.length; i++) {
                        read(file[i]);
    		}
                }
            } else {
                //如果没有,为空
                preview.src = "";
            }
        }
    
        function read (file) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var html = "<img src="+reader.result+" />";
                $("#imgDiv").append(html);
    	}
        }
    
        //提交数据
        function doSubmit() {
            var formData = new FormData($("#myForm")[0]);
            $.ajax({
                type: 'POST',
                url: '/addData',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result){
                    if (result.state == 200) {
                        alert('添加成功');
                    } else {
                        alert(result.msg);
                    }
                    return false;
                }
            });
            return false;
        }
    </script>
    Java:
    @RequestMapping(value = "/addData",produces= MediaType.APPLICATION_JSON_UTF8_VALUE)
    @ResponseBody
    public BaseResult addData (HttpServletRequest request MultipartFile[] file) {
        //MultipartFile[] file获取多张图片;MultipartFile file获取一张图片
        //上传服务器路径
        String path = request.getSession().getServletContext().getRealPath("/haha");
        File filepath = null;
        for (int i = 0; i < file.length; i++) {
            if (!file[i].getOriginalFilename().isEmpty()) {
                filepath = new File(path, file[i].getOriginalFilename());
                try {
                    file[i].transferTo(new File(path + file[i].getOriginalFilename()));
                    //上传的时候发现了一个问题,如果把图片名称改成生成时间戳后重命名上传,可能会导致上传的文件相同,小编纠结了好久发现原来是我的服务器运行太快,下一个图片生成的图片名称和上一个一样,我也是很懵圈,时间戳都生成到毫秒了还能出这问题,于是机智的我想出了一个办法,每次上传一张照片后咱让程序睡一秒,就没有这个问题了
                    //sleep(1000);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        if (filepath != null) {
            if(!filepath.getParentFile().exists()){
                filepath.getParentFile().mkdirs();
            }
        }
        //返回类型随便定义,不一定要抄我的。温馨提示:后端返回值和我不一样时,前端判断也要改一下
        return BaseResult.ok();
    }

    GAMEOVER~有不成功的可以给我留言,不对的地方请大佬们指正!!!

    展开全文
  • js file选择图片后回显 方法

    千次阅读 2016-05-18 16:26:26
    js file选择图片后回显 方法
    <script type="text/javascript">
         function changImg(e){
    		for (var i = 0; i < e.target.files.length; i++) {
    			var file = e.target.files.item(i);
    			if (!(/^image\/.*$/i.test(file.type))) {
    				continue; //不是图片 就跳出这一次循环
    			}
    			//实例化FileReader API
    			var freader = new FileReader();
    			freader.readAsDataURL(file);
    			freader.onload = function(e) {
    				$("#myImg").attr("src",e.target.result);
    			}
    		}
    	}
    </script>
    
    使用方式:
    <form action="">
       <input type="file" name="files" accept="image/*" οnchange="changImg(event)" >
       <img alt="再无图片" id="myImg" src="" height="100px",width="100px">
    </form>


    展开全文
  • js input file图片上传,一次性上传多张图片(前端预览功能); 运用js实现上传图片前的预览(支持多张图片),网上很多案例都是没有处理每个上传的图片文件名,这里我就增加了图片文件名的方法,删除对应图片的...
  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • input file选择图片后预览 单图和

    千次阅读 2018-12-17 09:59:31
    file" value="" /&gt;&lt;img src="" height="100px"&gt; &lt;script type="text/javascript"&gt; //预览图片 $("[name='icon']")....
  • input[type=file]不能选择同一张图片

    千次阅读 2018-04-19 01:24:51
    造成这种情况的原因是因为取消以后,并没有清空input的value属性,所以在下次onchange的时候,判断到选择同一个图片,onchange事件不会执行。 处理方案 在点击取消的操作逻辑里面,令input的value属性为null,如图: ...
  • js获取 input file 图片立即显示

    热门讨论 2014-12-05 10:20:12
    js获取input file控件选择图片 并且立即在img标签显示出来
  • js 上传多张图片或多文件

    千次阅读 2019-11-12 15:07:57
    <!Doctype> <html> <head> <meta charset="utf-8">...上传多张图片</title> <style> .upload-pic{ width: 120px; height: 30px; line-height: 30px; border-r...
  • js type=file图片预览

    2014-06-10 15:33:35
    js IE、Chrome上实现type=file图片实时预览
  • html5选择多张图片在页面内预览并上传到后台

    万次阅读 多人点赞 2017-07-11 14:02:33
    需求:点击选择图片(可选多张),确定后将选择图片显示在页面上,点击提交将图片提交给后台。 效果图: ...请选择一个图像文件:<...input type="file" id="pic_selector" ...--multiple,可选择多张图片-->...
  • 可以用于在浏览器上预览本地图片或者视频。以图片为例,生成url <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style&g...
  • 下面的是原来的代码,只能预览一张图片,现在我想预览多张图片,并且可以增加删除图片操作,求代码!!! ``` function Image() { var doc = document.getElementById("doc"); var img = document....
  • 规定只可上传图片,且可以选择多个文件当然,直接一个input type=file 只能选择上传的文件/资源,如果我们需要在选择图片之后,在当前页面实现预览效果,那么我们可以如下方式来实现HTML代码 ...
  • js input file多个文件上传功能是一款可input上传图片和input file多个文件上传功能特效代码
  • 项目中遇到上传图片,需要本地预览效果,测试时无意间发现,当选择A图片,然后更换为B图片,完全正常;当选择A图片,取消该图片,再测选择A图片后,发现不会再生成预览效果,出现了bug;查找相关资料后,终于找到了...
  • js实现在html页面使用file选择框选中图片后使用img标签显示出来 1、body: <body> <div> <img id="MYimg" src="" /> </div> <div style="margin-top: 20px;"> <a ...
  • 主要介绍了javascript实现input file上传图片预览效果,感兴趣的小伙伴们可以参考一下
  • 关于vue项目中移动端实现用户选择照片照片裁剪、一次上传多张图片功能。 最终要实现的效果如下图所示: 涉及的功能有 1、图片选择 2、图片从手机相机选择、拍照 3、图片选择后的裁剪 4、图片在页面的显示...
  • input file 重复上传同一张图片无效果

    千次阅读 2018-12-27 17:06:22
    方法一:来回切换input[type=’file’]的type属性值, document.getElementById("fileUpload").setAttribute("type",'text'); document.getElementById("fileUpload").setAttribute(&...
  • js清空input file的值

    万次阅读 多人点赞 2017-08-07 16:11:15
    今天在做选择本地图片上传的功能时遇到一个问题,第一次选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,这个过程没有问题,问题出在当把创建的img元素节点删除后,再点file控件选中同一个...
  • js input file多个文件上传功能是一款可input上传图片和input file多个文件上传功能特效代码
  • //上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new FileReader(); r.readAsDataURL(file); $(...
  • 2.可一次性选择多张图片,可追加图片图片可以预览; 3.可拖动图片,顺序默认从左0开始; 4.可删除单个图片,或清空所有图片; 5.跨域上传; html &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;...
  • 通过JavaScript技术来使用图片选择功能,通过监听图片利用图片转换技术将获取的图片资源转换成浏览器认识的格式来展示图片
  • &lt;FORM name=form action="...INPUT onpropertychange=document.all.aaaa.src=this.value type=file name=upload&gt;&lt;BR&gt;宽:&lt;INPUT name=W&gt; 高:&lt;INPU...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 174,749
精华内容 69,899
关键字:

filejs选择多张图片