我的前端工具集(二)文件上传的封装

我的前端工具集(二)文件上传的封装

 

liuyuhang原创,未经允许禁止转载

 

目录

我的前端工具集

 

1.文件上传样式与功能

 

  1.1.文件上传的表现

    文件上传控件的代码比较简单,功能都是浏览器封装好的,实际上也没啥不好的,就是难看 

    你做出来这个样子,产品经理肯定跟你急!!

    

    代码也蛮容易的,如下:

1 <input type="file" class="fileUpload" />

    不多说了,反正我自己都看不过去(公司没专职产品经理,我是个混合职业!)

 

  1.2.需求描述

 

  • 任意的按钮或某种html控件,点击以后能够使用上传控件的功能
  • 选择文件后文件的路径要与文件名要能够正确的显示出来

 

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自己改去吧。文件已经躺在本地了!

 

以上!!

转载于:https://www.cnblogs.com/liuyuhangCastle/p/9726939.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
封装 axios 通常是为了简化 API 调用过程、统一数据结构、增加错误处理机制以及增强安全性等。在封装过程中,我们可能会遇到需要通过 HTTP POST 请求上传文件的情况。以下是使用 Axios 进行文件上传的基本步骤: ### 步骤 1: 创建 axios 配置实例 首先,创建一个 axios 的实例,并配置好超时时间、请求头等。 ```javascript import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://your-api-url.com', // 指定API服务器地址 timeout: 5000, // 设置请求超时时间 }); ``` ### 步骤 2: 添加上传文件功能 在封装的 axios 函数中,你可以将文件作为请求的数据的一部分来发送。这通常是通过 `data` 属性来完成的,并设置其 `Content-Type` 为 `multipart/form-data` 来告知服务器这是一个文件上传操作。 ```javascript function uploadFile(file, params) { const formData = new FormData(); formData.append('file', file); for (let key in params) { formData.append(key, params[key]); } return axiosInstance.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); } ``` ### 步骤 3: 使用封装后的函数 现在你可以像使用普通的 axios 请求一样调用这个新的函数,只需要传入你要上传的文件和对应的参数即可。 ```javascript const uploadedFile = document.getElementById('my-file-input').files; const requestParams = { /* your parameters */ }; uploadFile(uploadedFile, requestParams) .then(response => { console.log('Success:', response.data); }) .catch(error => { console.error('Error:', error.response ? error.response.data : error.message); }); ``` ### 相关问题: 1. **为什么需要封装 axios?** - 提高代码复用性,减少不必要的重复代码。 - 统一了 API 调用的方式和风格,便于团队成员理解和维护。 - 易于添加额外的功能如日志记录、中间件、异常处理等。 2. **封装 axios 时需要注意哪些事项?** - **安全**: 确保敏感信息不会泄露,例如在日志中不包含用户凭据。 - **性能优化**: 对请求进行适当缓存或异步加载以提升用户体验。 - **兼容性**: 确保封装函数在各种浏览器和环境中都能正常工作。 3. **如何调试封装的 axios 函数?** - 使用 `console.log()` 或专门的调试工具查看请求和响应的具体内容。 - 开发环境可以开启 CORS(Cross-Origin Resource Sharing),以便于前端和后端调试通信问题。 - 使用断言(assertions)检查返回值是否符合预期。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值