最近在解决各种各样的浏览器兼容问题,遇到一个文件上传重命名的问题,就是在 IE上传不支持 new File

查询MDN (  https://developer.mozilla.org/zh-CN/docs/Web/API/File/File  ) 发现其是一个构造器 创建新的FILe 对象实例;

由于使用 input type="file" 获取的文件  File对象的name属性是只读的,所以想对其重名, 就考录根据input获取的Fil对象构造一个一模一样的新的FIle对象,并对其进行重名,所以采用的代码为:

  var Newfile = new File([u.file], refileName, {
type: u.file.type
});
u.file为一个包含ArrayBufferArrayBufferViewBlob,或者 DOMString 对象的 Array — 或者任何这些对象的组合

refileName为自己想重新定义的名字

typeDOMString,表示将要放到文件中的内容的 MIME 类型。默认值为 "" 

以上这种可以成功重名文件名,但是在IE上不支持,或报此对象不存在的错误;

因 File 是继续于Blob的所以有以下一种解决办法:

let File = window.File

try {
new File([], '')
} catch(e) {
File = class File extends Blob {
constructor(chunks, filename, opts = {}){
super(chunks, opts)
this.lastModifiedDate = new Date()
this.lastModified =+ this.lastModifiedDate
this.name = filename
}
}
}

File不支持的话重写一下这个类,那么就在IE上就存在了File 这个类,然后就可以new了

另外 还有一种解决方法,这个方法个人觉得是最好的,既可以兼容谷歌也可以兼容IE等其他浏览器

let formData = new FormData();
//data 为二进制的blob图片数据,//fileName 文件名
formData.append('files',data,fileName);

这样就可以完美解决了!

 

js 上传文件时对名称进行重命名的更多相关文章

  1. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  2. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  3. IE8上传文件时文件本地路径变成"C:\fakepath\"的问题

    转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...

  4. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】

    转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...

  5. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题

    在使用<input id="file_upl" type="file" />控件上传文件时,有时会需要获取文件本地路径展示给客户,这时可以通过这样的 ...

  6. JS 上传文件 Uploadify 网址及 v3.2.1 参数说明

    http://www.uploadify.com/ 一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonC ...

  7. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  8. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  9. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  10. winScp上传文件时,如何过滤制定文件

    在用winScp上传文件时,有些文件不想上传到服务器上.怎么办呢? 比如我希望过滤.svn .git文件和目录怎么操作呢? 第一步:在菜单上选中选项,点击选项. 第二步,点击传输->编辑 第三步 ...

随机推荐

  1. My Calendar III——LeetCode⑪

    //原题链接https://leetcode.com/problems/my-calendar-iii/submissions/ 题目描述 Implement a MyCalendarThree cl ...

  2. PC端自动化测试实战教程-7-pywinauto等待方法大集合 (详细教程)

    1.简介 经过上一篇的学习和讲解想必小伙伴或者童鞋们已经意识到等待的重要性了吧.宏哥在上一篇中在start()后,加入适当的等待时间(如time.sleep()),让应用程序有足够的时间初始化窗口和U ...

  3. 代码随想录第11天 | 二叉树part01

      理论基础 需要了解 二叉树的种类,存储方式,遍历方式 以及二叉树的定义 文章讲解:https://programmercarl.com/%E4%BA%8C%E5%8F%89%E6%A0%91%E7 ...

  4. AtCoder Beginner Contest 357-D

    Problem For a positive integer \(N\), let \(V_N\) be the integer formed by concatenating \(N\) exact ...

  5. 如何实现RAG与MCP集成

    1.概述 在人工智能的创新浪潮中,检索增强生成(RAG)技术以其高效调用外部知识.提升生成内容准确性的能力备受瞩目,而模型上下文协议(MCP)则为不同模型间的交互与协同提供了标准框架.当 RAG 的知 ...

  6. Java安全_SQL注入

    [!NOTE] 本次学习使用开源项目: https://github.com/JoyChou93/java-sec-code/blob/master/src/main/java/org/joychou ...

  7. 技术分享:主流GUI自动化框架的窗口置顶机制实现对比

    前言 在自动化测试和RPA开发过程中,窗口置顶是一个常见且关键的需求.无论是确保测试窗口始终可见,还是保证自动化操作的准确性,各大Python自动化框架都提供了相应的窗口置顶功能.本文将深入分析主流框 ...

  8. Springboot笔记<7>过滤器与拦截器

    过滤器 拦截器 过滤器 过滤器拦截的是URL Spring中自定义过滤器(Filter)一般只有一个方法,返回值是void,当请求到达web容器时,会探测当前请求地址是否配置有过滤器,有则调用该过滤器 ...

  9. 商品中心—8.商品C端处理高并发的技术文档

    大纲 1.商品C端的高并发架构 2.商品C端的布隆过滤器组件 3.Guava缓存的封装与使用 4.商品C端的接口设计与运行流程总结 5.商品C端系统对商品数据新增和变更时的处理 1.商品C端的高并发架 ...

  10. hot100之二叉树下

    二叉树的右视图(199) class Solution { List<Integer> res = new ArrayList<>(); public List<Inte ...