javascript - jQuery 文件上传，只有单张图片并在上传前重命名

Question

我正在使用 JQuery File Upload plugin .

我想限制上传一张图片，如果选择了另一张图片则替换，并在上传到服务器之前重命名。我的html代码

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input id="fileupload" type="file" name="files[]"> 
</span>

我试着对文件做一些改动

jquery.fileupload.js

但没有成功。

Answer 1

我知道很久以前有人问过这个问题，但是当其他工具(如 DropzoneJS)有办法在将文件发送到服务器之前更改文件名时，另一个回答是不完整的答案。翻了下源码，原来jQuery File Upload也有这个能力。

在 jQuery 文件上传 submit 事件回调中或在调用 data.submit() 之前的任何时间，更改 files 数组并设置上传名称。例如:

$('#fileupload').fileupload({
    maxNumberOfFiles: 1,
    submit: function(e, data) {
        data.files[0].uploadName = 'mynewfilename.jpg';
    }
});

虽然浏览器控制的 File 对象的 name 属性是只读的，但这并不会阻止定义新属性。 jQuery 文件上传发送 uploadName(如果存在)，否则回退到 name。

当然，这里没有排除服务器端验证传入数据的责任，但它确实表明可以更改 jQuery 文件上传发送到服务器的文件名。