确实通过File API获取到的file类型是只读的,即使获取了文件也无法修改文件名,
但是,我们仍然可以通过用原文件的数据构造一个新的file对象的方法来达到修改文件名的目的。
//上传图片
//图片预览
---------------------------------------------
//获取文件对象
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);