一、dropzone.js input type=file
Dropzone.js是一个开源的、具有可扩展性的、美观并且简单易用的前端文件上传库。使用Dropzone.js可以通过简单的配置轻松实现文件上传功能。通过使用Dropzone的元素，可以让用户选择文件并进行上传。下面是一个简单的演示示例：
<form action="/file-upload" class="dropzone"></form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<!-- or just use this: <script src="/path/to/dropzone.js"></script> -->
二、dropzone.js 修改headers
Dropzone.js允许我们通过xhrFields选项轻松地修改XMLHttpRequest对象的默认设置，从而实现自定义header的添加，在文件上传过程中可以携带自定义header的值进行传递。更改XMLHttpRequest默认设置的方式如下所示：
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone");
myDropzone.on("sending", function(file, xhr, formData) {
xhr.setRequestHeader('my-custom-header', 'header-value');
});
三、dropzone.js mvc c#
Dropzone.js和ASP.NET MVC一起使用非常方便和简单。我们可以通过定义一个Controller类，然后在其中定义与文件上传相关的action方法来自定义控制器的行为。
[HttpPost]
public JsonResult UploadFile(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
file.SaveAs(filePath);
return Json(new { success = true });
}
return Json(new { success = false });
}
然后在Dropzone.js配置文件中，我们只需要指定这个action方法的URL：
Dropzone.options.myDropzone = {
url: "/MyController/UploadFile"
};
四、dropzone.js例程
Dropzone.js具有一些很棒的例子，可以在其中展示Dropzone.js的不同特性和用例。访问它们的方式很简单，只需要转到Dropzone网站的示例页面https://www.dropzonejs.com/examples.html。下面是一个演示Dropzone的简单示例：
<form action="/" id="my-awesome-dropzone" class="dropzone">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
dictDefaultMessage: '拖拽文件到此上传或点击上传',
dictRemoveFile: '删除',
dictCancelUploadConfirmation: '确定取消上传吗？',
accept: function(file, done) {
if (file.type != "image/jpeg" && file.type != "image/png") {
done("请上传jpg或png格式的图片");
}
else { done(); }
}
};
</script>
五、dropzone.js传递参数
Dropzone.js允许我们在HTTP POST请求中添加任意自定义参数。我们可以通过Dropzone的params选项来添加multipart/form-data POST参数。添加自定义参数的方式非常简单，只需要在Dropzone配置文件中的params中定义即可。
// Define the url to send the message to
var url = '/file-upload';
// Set up any event handlers
Dropzone.options.myDropzone = {
url: url,
params: {
exampleParameter: 'exampleValue'
}
};
// Get dropzone instance
var myDropzone = Dropzone.forElement("#my-dropzone");
// Get URL
var url = myDropzone.options.url;
// Get parameter value
var exampleValue = myDropzone.options.params.exampleParameter;
六、dropzone.js初始化
为了使用Dropzone.js，我们需要把Dropzone.js添加到我们的代码中，然后在合适的DOM元素上调用Dropzone()构造函数。初始化完毕后，Dropzone会触发一系列事件来处理文件上传。以下是初始化Dropzone的简单示例：
<form action="/" class="dropzone needsclick" id="demo-dropzone"></form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#demo-dropzone", { /* options */ });
</script>
七、dropzone.js razor
Dropzone.js和Razor可以很容易地集成。Razor可以使用C#语言或其他.NET编程语言来创建动态Web页面。在下面的示例中，我们使用Razor来集成Dropzone.js并创建一个表单，在表单中使用Dropzone来上传文件。
@using (Html.BeginForm("UploadFiles", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", @id = "dropzoneForm" }))
{
<div class="fallback">
<input name="file" type="file" multiple="multiple" />
</div>
}
<script src="//cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
八、dropzone.js flask
Flask是Python语言的一个轻量级Web框架。Flask框架和Dropzone.js结合起来使用非常简单，只需要定义一个路由，然后使用request对象来收集表单数据和文件信息即可。
@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return 'file uploaded!'
return render_template('upload.html')
以上示例定义了一个/upload路由，用于处理文件上传，并将文件保存在服务器上。下面是一个简单的HTML模板，用于将文件上传到服务器上：
<form action="/upload" method="post" class="dropzone">
</form>
九、dropzone.js回显图片选取
Dropzone.js允许我们在文件上传之后在Web页面上预览文件。我们可以在Dropzone上设置一个预览图片的容器，这样就可以在上传文件之后很容易地看到预览图片。下面是一个简单的演示示例：
<div id="my-dropzone"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
Dropzone.options.myDropzone = {
success: function(file, response){
if(file.type.match(/image.*/)){
var img = document.createElement("img");
img.src = response;
img.alt = file.name;
img.width = 250;
this.element.appendChild(img);
}
}
};
</script>
总结
Dropzone.js是一个非常好用的文件上传库，它包含了非常丰富的API和组件，可以帮助我们快速创建一个美观、安全、高效的文件上传功能，而且使用起来非常简单。但是，文章中所介绍的只是其中一小部分功能，如果要深入了解它，还需要自行到Dropzone.js官网查看文档和例子。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/237070.html
微信扫一扫 
支付宝扫一扫 