在上传 dropzone 之前更改文件名答案

【问题标题】：Change the name of filename before upload dropzone在上传 dropzone 之前更改文件名
【发布时间】：2016-07-11 09:14:25
【问题描述】：

当文件放在 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);
  });

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

【问题讨论】：

标签： javascript php jquery dropzone.js

【解决方案1】：

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

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

【讨论】：

这不会更改浏览器端的文件名，即我需要在此处更改的图像的 alt 属性
您所说的文件名我认为是 dropzone 术语中的缩略图文件名。但是，请在代码中查看我的更新。

【解决方案2】：

您还需要以下 css 来配合 js 代码来实现您的结果：

.dz-preview .dz-filename{display:none}
.dz-preview.dz-success .dz-filename{display:block}

【讨论】：