javascript - 上传前更改文件名 dropzone

Question

我想在文件拖放到 dropzone 时更改文件名。

Dropzone.autoDiscover = false;

  var myDropzone = new Dropzone("#pop");
  myDropzone.on("addedfile", function(file) {


  });

  myDropzone.on("removedfile",function(file){
  	$.ajax({
				url: "delete.php",
				type: "POST",
				data: { 'name': file.name}
				});
 });

myDropzone.on("sending", function(file, xhr, formData) {
			console.log(file);
	 console.log(xhr);console.log(formData);
  	file.uniqueName = new Date().getTime() +"_" + file.name;
		formData.append("unicname",  file.uniqueName);
    $("#pop").append("<input type='hidden' name='hidname' id='hidname' value="+file.uniqueName+">");
    xhr.response('unival='+file.uniqueName);
    console.log(xhr);console.log(formData);
    
      console.log(file);
  });

Dropzone.options.myDropzone = {
 	
 	   paramName: "file",
  uploadMultiple: true,
    init: function() {
    	 
    	
        thisDropzone = this;
   <!-- 4 -->
        
        $.getJSON('upload.php', function(data) {
 			
            <!-- 5 -->
            $.each(data, function(key,value){
                 
                var mockFile = { name: value.name, size: value.size };
                
                myDropzone.options.addedfile.call(myDropzone, mockFile);
 
                myDropzone.options.thumbnail.call(myDropzone, mockFile, "upload/"+value.name);
                 
            });
             
        });
    },

   success: function(file, response){
                
            }

   
};

已尝试以下代码，但不起作用。这些值不会附加到表单数据。无法从您定义的任何地方在 dropzone.js 上访问对变量文件的更改。 Dropzone.js

myDropzone.on("sending", function(file, xhr, formData) {
			console.log(file);
	 console.log(xhr);console.log(formData);
  	file.uniqueName = new Date().getTime() +"_" + file.name;
		formData.append("unicname",  file.uniqueName);
    $("#pop").append("<input type='hidden' name='hidname' id='hidname' value="+file.uniqueName+">");
    xhr.response('unival='+file.uniqueName);
    console.log(xhr);console.log(formData);
    
      console.log(file);
  });

似乎没有一个解决方案有效。 基本上我想将文件保存到服务器指定的特定文件名。

Answer 1

从技术上讲，您可以在上传文件后更改缩略图文件名，而且我认为拖放区应该与您的数据表单分开，一旦您上传文件，服务器将返回一个文件名。您可以在数据表单中使用该文件名设置隐藏输入值，然后最终提交数据表单。代码如下:

<div id="pop">

</div>
<form id="data-form">
    <input type="hidden" name="fileName">
    <input type="submit" name="submit" value="submit">
</form>
<script>
    var dropzone = new Dropzone("#pop");
    dropzone.on("success",function(file,response){
        var fileName = response.data.fileName //server return fileName
        $('input[name="fileName"]').val(fileName);
        var dataUrl = response.data.fileUrl;
        file.name = fileName //change thumbnail file name
        this.emit("thumbnail",file,dataUrl);//draw thumbnail
    });

</script>