使用 Javascript 添加新文件扩展名而不删除旧文件扩展名

Question

There has been few similar questions ( here and here ) but not exactly what I want and I haven't been able to combine the codes.

I have an upload form and if user uploads ZIP or RAR file, I want to add.jpg file extension without removing.zip or.rar extension. For example, "file.zip" to "file.zip.jpg".

I need this because users can upload images and PDF files into my server but if somebody has multiple files, it's better to zip them. I also write certain metadata for the uploaded files based on the selections user has made in the upload form. Metadata is for the Elvis so I can move the pictures around my server based on the metadata. Problem is that certain metadata can't be written in ZIP files in Elvis at the moment so my workaround is to change the file extension as.jpg to fool Elvis and write metadata for the file. Yes, this is a bad workaround but at the moment it serves my purposes.

I don't have much code ready because I don't know where should I begin. Also, you won't drop from the chair when you see my JS functions;) JS code can be written with jQuery.

<form action="http://url.here" method="post" enctype="multipart/form-data" id="form" onsubmit="addExtension();">
  <label for="file">File </label>
  <input type="file" name="Filedata" id="file">
  <input type="submit" value="Upload" />
</form>

Answer 1

The questions you link basically ask about string manipulation. However, you want to alter a file upload programmatically, which is an entirely different subject. Historically, most browsers explicitly disallow it for security reasons. Some modern browsers implement the W3C File API ( here's an example for Firefox ) which gives kind of full control about file uploads. I don't know how widespread its support is (probably, it doesn't work on Internet Explorer) but that's your only chance to do it client-side unless you are willing to switch to Flash.

IMHO, it looks more sensible to do it server-side but I'm not sure about how much freedom you have (it looks that Elvis is some sort of black box).

Edit: I just found this: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)#Related_specifications