2016-07-11 137 views
2

我想在文件放在dropzone上时更改文件名的名称。在上传之前更改文件名的名称dropzone

Dropzone.autoDiscover = false; 
 

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

 

 
    }); 
 

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

 
myDropzone.on("sending", function(file, xhr, formData) { 
 
\t \t \t console.log(file); 
 
\t console.log(xhr);console.log(formData); 
 
    \t file.uniqueName = new Date().getTime() +"_" + file.name; 
 
\t \t 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 = { 
 
    \t 
 
    \t paramName: "file", 
 
    uploadMultiple: true, 
 
    init: function() { 
 
    \t 
 
    \t 
 
     thisDropzone = this; 
 
    <!-- 4 --> 
 
     
 
     $.getJSON('upload.php', function(data) { 
 
    \t \t \t 
 
      <!-- 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){ 
 
       
 
      } 
 

 
    
 
};

已经尝试下面的代码,但不work.The值不追加形成data.The修改变量文件无法访问从任何地方,你可以definetely dropzone.js “T。 Dropzone.js

的解决方案

myDropzone.on("sending", function(file, xhr, formData) { 
 
\t \t \t console.log(file); 
 
\t console.log(xhr);console.log(formData); 
 
    \t file.uniqueName = new Date().getTime() +"_" + file.name; 
 
\t \t 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); 
 
    });

无似乎工作。 基本上我想将文件保存到指定给服务器的特定文件名。

回答

0

从技术上讲,您可以在上传文件后更改缩略图fileName,我认为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> 
+0

的图像这不会改变在浏览器端即alt属性的文件名,其我需要在这里更改 –

+0

您所说的文件名我认为是dropzone术语中的缩略图文件名。不过,请在代码中查看我的更新。 –

0

你还需要下面的CSS与JS代码去实现你的结果:

​​