javascript中有什么办法能修改input file 对象的name属性值么？

Question

请问有什么方法能修改浏览器中file对象的name属性么？
现在项目里 android webview 4.4 遇到一个奇怪问题
中文文件被名被转移成了“%4D%3C%2E.png”这种名字了
导致form都没发提交了。本人想把name换一下名字看看能不能继续提交form
因为提交英文名的附件是没问题的。

本人尝试过这么写是不好使的 ，用原型链好像也不行
$('#file').get(0).files[0].name="123";

Answer 1

这个属性是只读的。无法做到本地的修改。但是你可以提示。

<input type="file" name='upload' multiple="multiple">
    
var formData = new FormData();
$('input[name="upload"]').change(function(event) {
    var files = $(this)[0].files;
    var file_arr = [];
    for (var i = 0; i < files.length; i++) {
        if (files[i].name.match(/[\u4E00-\u9FA5\uF900-\uFA2D]/)) {
            alert('您选中的文件包含中文名，请修改');
        } else {
            file_arr.push(files[i])
        }
    }
    formData.append('file', file_arr);
    $.ajax({
        url: "xx.php",
        type: "POST",
        data: formData,
        processData: false, 
        contentType: false 
    });

})


//这还有个其他的方案：http://stackoverflow.com/questions/4184904/multiple-file-upload-using-ajax。主要是提供思路。

Answer 2

//可以强制修改
let fileName=new Date().getTime()+".png"
let newFile = new window.File([files], fileName, {type: file.type}) 这里的files是你接收的file

Answer 3

上面老哥的 new window.File 已经可以解决更改 file对象内 filename 的问题

还有一种需求 当你选择文件后 未提交, 然后把源文件删掉,这时候提交浏览器就会报错,我猜测浏览器当前存储的只是文件的引用
粗略解决方案是: 拿到 file 转成 base64 存起来 然后用到的时候再转成 file 对象, 文件名也能自定义

//将base64转换为blob
export function base64ToBlob(dataurl) {
  let arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = window.atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

//将blob转换为file
export function blobToFile(theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  theBlob.filename = fileName;
  // 配置流中的 fileName
  return new File([theBlob], fileName);
}