将文件上传到HTML表单，重命名，然后将文件返回给用户 [英] Upload file to HTML form, rename it, and return file to user

问题描述

希望构建一个小的JavaScript Web工具来重命名文件，而无需将它们发送到服务器。理想情况下，我想将文件上传到表单， input type =file或 DataTransfer （拖放），然后运行脚本来更改 file.name ，然后将重命名的文件呈现给用户，所有客户端。

Looking to build a little JavaScript web tool to rename files without needing to send them to a server. Ideally, I'd like to upload a file to a form, to either input type="file" or DataTransfer (drag/drop), then run a script to change the file.name, then present the renamed file to the user, all client side.

这可能吗？我知道如何重命名文件，但如何让用户保存新文件而不将其发送到服务器？

Is this possible? I know how to rename the files, but how to let the user save the new file without sending it to a server?

谢谢！

推荐答案

试试这个

如果你想要多个或拖放，只需编辑它

if you want multiple or drag and drop, just edit it

<input type="file" id="files" name="files"/>
<input type="text" id="newname"> <button>rename</button>
<div id="output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
	$(function(){
		$('button').click(function(){
			renameFile($('#files')[0].files[0], a.files.type, $('#newname').val());
		});
		
		function renameFile(file, typeFile, newname) {
			var reader = new FileReader();
			reader.onload = function(event) {
				$('#output').append('<a href="data:'+ typeFile +';,'+ encodeURI(event.target.result) +'" download="'+newname+'">'+newname+'</a>');
			}
			reader.readAsBinaryString(file);
		}
	});
</script>

这篇关于将文件上传到HTML表单，重命名，然后将文件返回给用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！