个人前端工具集(二)文件上传的封装css
liuyuhang原创,未经容许禁止转载html
目录前端
个人前端工具集jquery
1.文件上传样式与功能ajax
1.1.文件上传的表现json
文件上传控件的代码比较简单,功能都是浏览器封装好的,实际上也没啥很差的,就是难看 浏览器
你作出来这个样子,产品经理确定跟你急!!缓存
代码也蛮容易的,以下:app
1 <input type="file" class="fileUpload" />
很少说了,反正我本身都看不过去(公司没专职产品经理,我是个混合职业!)dom
1.2.需求描述
2.封装思路
2.1.隐藏 file 控件
第一反应是style=“display:none”
然而网上搜了一下,居然不少人说style="opacity: 0",而后将制做后的控件的z-index提早,
同时调整相对位置,将原控件覆盖。
提供这种方案的,你有病么?哪里抄的?透明度为0可是还占位,东西还存在,还要写不少内容
来调整位置。。。
脑壳有泡。
2.2.click事件联动调用
type=“file”的input元素自己是有内置的click事件的,咱们须要将本身重写的html的点击事件,来获取
隐藏的type=“file”的input元素,而后调用其click事件,这样就可以完成上传功能。
2.3.上传的文件路径显示
文件是否选择成功,选择的什么文件,须要有一个“空间”来接收并显示,浏览器自身的上传控件后面,
会在选择了文件之后,显示文件名的。
使用console.log($("#fileInput").val()),和console.log($("#fileInput"))打印的内容以下图:
展开jquery对象后,在value属性中找到了上述信息,以下图:
所以获取文件名也不是啥难事了。
3.代码
3.1.HTML代码以下:
1 <!-- 上传控件 --> 2 <div id="fileUploadList"> 3 <div class="input-group" style='margin:5px 0px 5px 0px'> 4 <!-- 隐藏的文件上传按钮,太tmd难看 --> 5 <input type="file" class="fileUpload" style="display: none" /> 6 <!-- 重作的上传按钮,各类绑定 --> 7 <span class="input-group-btn"> 8 <button class="btn btn-default chooseFile" type="button">选择</button> 9 <button class="btn btn-warning modifyChooseFile" type="button">修改</button> 10 <button class="btn btn-success fileUploadSubmit" type="button">上传</button> 11 </span> <input type="text" class="form-control" readonly="readonly"> 12 </div> 13 </div>
3.2.JS代码以下:
1 $(function() { 2 fileUploadListener("fileUploadList"); //初始化监听器 3 }) 4 /** 5 * 监听器 6 */ 7 function fileUploadListener(id) { 8 $("#" + id + " .btn").unbind("click"); //移除监听器 9 //文本框绑定监听器 10 $("#" + id + " .fileUpload").change(function() { 11 $(this).next().next().val($(this).val()); 12 }) 13 //选择文件按钮监听器 14 $("#" + id + " .chooseFile").click(function() { 15 $(this).parent().prev().click(); 16 console.log($(this).parent().prev()) 17 }); 18 //修改按钮监听器 19 $("#" + id + " .modifyChooseFile").click(function() { 20 $(this).parent().prev().click(); 21 console.log($(this).parent().prev()) 22 }); 23 //上传按钮监听器 24 $("#" + id + " .fileUploadSubmit").click(function() { 25 var dom = $(this).parent().prev(); 26 testUpload(dom); 27 }); 28 }
3.3.异步文件上传代码以下:
1 /* 2 * 点击上传按钮的submit的函数 3 */ 4 function testUpload(dom) { 5 var fileObj = dom[0].files[0];//文件上传控件中的file信息获取 6 if (null == fileObj || '' == fileObj || 'undefinded' == typeof fileObj) {//校验 7 dom.next().next().val("你未选择任何文件!");//提示 8 return null; 9 } 10 if (fileObj.size > 1024 * 1024 * 10) { //文件大于10m 11 dom.next().next().val("你选择的文件太大了,超过了10M,限制上传");//提示 12 return null; 13 } 14 var fileForm = new FormData(); //建立file from 15 fileForm.append("action", "UploadVMKImagePath"); //修改头 16 fileForm.append("file", fileObj); //添加文件对象 17 18 var data = fileForm; 19 20 $.ajax({ 21 url : local + "/testFileUpload.do", //测试上传文件接口 22 data : data, 23 type : "Post", 24 dataType : "json", 25 cache : false, //上传文件无需缓存 26 processData : false, //用于对data参数进行序列化处理 这里必须false 27 contentType : false, //头信息修改,必须 28 success : function(resultMap) { 29 console.log(resultMap);//获取的返回信息 30 console.log("上传完成!"); 31 }, 32 error : function(resultMap) { 33 console.error(resultMap); 34 } 35 }) 36 }
代码本身看,反正内容很少!!
4.效果
好歹能看了,css本身改去吧。文件已经躺在本地了!
以上!!