javascript - jQuery File Upload, only single image and rename before uploading - Stack Overflow

admin管理员组

文章数量:1390192

I am using the JQuery File Upload plugin.

I want to limit upload to one image, and replace if another image is selected, and rename before uploading to the server.My html code

<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>

I tried to make few changes in file

jquery.fileupload.js

but no success.

I am using the JQuery File Upload plugin.

I want to limit upload to one image, and replace if another image is selected, and rename before uploading to the server.My html code

<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>

I tried to make few changes in file

jquery.fileupload.js

but no success.

• javascript
• jquery
• file-upload

Share Improve this question Follow edited Dec 27, 2013 at 11:00 Nicolas Cortot 6,7013737 silver badges4545 bronze badges asked Dec 27, 2013 at 10:09 Fahad KhanFahad Khan 1,63544 gold badges2323 silver badges3838 bronze badges 1

• I got the problem solve with this link . Its usefull for this kind of problem. Shared it because of vote up from someone who might need this. Thanks – Fahad Khan Commented Jan 25, 2014 at 6:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I realize this was asked a long time ago, but the other response is an inplete answer when other tools like DropzoneJS have a way to alter the filename before it is sent to the server. After scouring the source code, it turns out that jQuery File Upload also has the ability.

In a jQuery File Upload submit event callback OR at any time before calling data.submit(), alter the files array and set uploadName. For example:

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

While the name property on a browser-controlled File object is read-only, that doesn't stop new properties from being defined. jQuery File Upload sends uploadName if it exists, otherwise it falls back to name.

Of course, nothing here excludes server-side responsibilities to validate the ining data, but it does show that it is possible to change the filename that jQuery File Upload sends to the server.

For security reasons client side javascripts do not have control of this. You can rename the file on the server when it gets uploaded.

Similar question and answer ware given here rename file that user uploads javascript

Best practice is to rename files on server-side, e.g. in the PHP script

you can limit your files with maxNumberOfFiles option

$('#fileuploadbasic').fileupload({
    maxNumberOfFiles: 1
});

本文标签： javascriptjQuery file uploadonly single image and rename before uploadingStack Overflow