javascript - 请问前端怎么将上传文件的名字修改？

问题描述

问 题

input 标签 type="file" 选中图片后会有名字，我想把那个名字修改为没有后缀名的数字名称，然后才可以上传服务器，请问怎么做？
谢谢。

解决方案

确实通过File API获取到的file类型是只读的，即使获取了文件也无法修改文件名，

但是，我们仍然可以通过用原文件的数据构造一个新的file对象的方法来达到修改文件名的目的。

//上传图片
<input type="file" id="fileDemo">

//图片预览
<img id="uploadPreview">

---------------------------------------------

//获取文件对象
var file = document.querySelector("#fileDemo").files[0]

//创建新文件对象
var newfile = new File([file], new Date().getTime()+".jpg",{type:"image/jpeg"});


//以下为预览图片代码
var reader = new FileReader(); 
reader.onload = function (oFREvent) {
  document.querySelector("#uploadPreview").src = oFREvent.target.result;
};
reader.readAsDataURL(newfile);


---------------------------------------------


//以下是上传图片的方法
reader.onloadend = function() {
    // 这个事件在读取结束后，无论成功或者失败都会触发
    if (reader.error) {
        console.log(reader.error);
    } else {
        document.getElementById("bytesRead").textContent = file.size;
        // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
        var xhr = new XMLHttpRequest();
        xhr.open(/* method */ "POST",
                /* target url */ "upload.jsp?fileName=" + file.name
                /*, async, default to true */);
        xhr.overrideMimeType("application/octet-stream");
        xhr.sendAsBinary(reader.result);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log("upload complete");
                    console.log("response: " + xhr.responseText);
                }
            }
        }
    }
}

reader.readAsBinaryString(newfile);

参考资料：
1.使用 JavaScript File API 实现文件上传
2.MDN - Web API 接口 FileReader
3.js根据已有File对象，创建新的file对象

这篇关于javascript - 请问前端怎么将上传文件的名字修改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！