Home > Developer > Web Develop
Implements a drag-and-drop File Upload control.
Professional because of focus. A lot of small things are very inconspicuous at first glance, but they do well in a specific field, because they concentrate on enthusiasm.
Dropzone is such a small control that implements drag-and-drop upload. It does not rely on other JS libraries such as jquery and supports customization in many aspects.
The preparation work required to use Dropzone is very easy. You only need to add:
<script src="./path/to/dropzone.js"></script>In this way, you can use the Dropzone function. Of course, you need to handle the files on the server. Dropzone only controls the front end.
If you want to make your drag/drop upload space more beautiful, such as providing upload preview or something, you can use the other files provided by the author:
css/dropzone.css images/spritemap.png images/spritemap@2x.pngAdd them to appropriate paths for reference.
Using Dropzone is usually a form Control to reference:
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>The class attribute marked as "dropzone" is the "informant" of Dropzone, and Dropzone is infiltrated through it.
In fact, the above Code can be simply understood as containing the following code:
<input type="file" name="file" />The "file" name can also be changed by changing the "paramName" attribute of Dropzone.
I wrote a reference example:
<HTML> <HEAD> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <TITLE> dropzonejs test </TITLE> </HEAD> <link href =. /dropzone/dropzone.css rel = stylesheet/> <script src = ". /dropzone/dropzone_gbk.js "> </script> <style type =" text/css "> span. ts {color: rgb (0,0, 255)} input. btn {width: 71px; height: 20px ;}</style> <script language = "JavaScript"> // Prevent Dropzone from auto discovering this element: // Dropzone. options. myAwesomeDropzone = false; // This is useful when you want to create the // Dropzone programmatically later // Disable auto discover for all elements: // Dropzone. autoDiscover = false; // drag and drop to directly upload the Dropzone. options. myAwesomeDropzone = {paramName: "userfile2", // The name that will be used to transfer the filemaxFilesize: 2, // MBaccept: function (file, done) {if (file. name = "justinbieb Er.jpg ") {done (" Naha, you don't. ") ;}else {done () ;}, init: function () {document. getElementById ("divText "). innerHTML = "After dragging a file, the file will be directly submitted" ;}};/* // drag it and click the button to upload the Dropzone. options. myAwesomeDropzone = {paramName: "userfile2", // The name that will be used to transfer the filemaxFilesize: 2, // MBaccept: function (file, done) {if (file. name = "justinbieber.jpg") {done ("Naha, you don't. ") ;}else {done () ;}, au ToProcessQueue: false, init: function () {var submitButton = document. querySelector ("# submit-all") myAwesomeDropzone = this; // closuresubmitButton. addEventListener ("click", function () {myAwesomeDropzone. processQueue (); // Tell Dropzone to process all queued files .}); document. getElementById ("divText "). innerHTML = "After dragging a file, click the button to submit the file" ;}}; */</SCRIPT> <BODY> ---------------------------------- <br> <! -- Drag and drop upload --> <span class = "ts"> drag and drop upload: </span> <br> <form action = "FileAction. do "class =" dropzone "id =" myAwesomeDropzone "> <input type =" button "name =" submit "value =" submit "id =" submit-all "class =" btn "/> </form> <div id =" divText "style =" color: red "> </div> <br> ------------------------------------ <br> <! -- Normal upload --> <span class = "ts"> normal upload: </span> <br> <form method = "post" action = "FileAction. do "enctype =" multipart/form-data "id =" form1 "> <input type =" file "id =" f2 "name =" userfile "> <br> <inputtype = "text" name = "ta" value = "text parameter"/> <br> <inputtype = "submit" name = "submit" class = "btn"> </form> <div id = "divText" style = "color: red "> Effect Comparison of normal file upload </div> <br> ------------------------------------ <br> </BODY> </HTML>You can try the result. The page is as follows:
Just like Lu Buhe and Zhao Yun in The Romance of the Three Kingdoms, Dropzone has a little pity. Dropzone has requirements on the browser. It is a small sigh for IE to support more than 10.
First, set Form's AllowDrop = true
Public partial class Form1: Form {public Form1 () {InitializeComponent ();} private void btnStart_Click (object sender, EventArgs e) {} private void form=dragenter (object sender, DragEventArgs e) {if (e. data. getDataPresent (DataFormats. fileDrop) {e. effect = DragDropEffects. link;} else {e. effect = DragDropEffects. none;} private void form=dragdrop (object sender, DragEventArgs e) {string p Ath = (System. Array) e. Data. GetData (DataFormats. FileDrop). GetValue (0). ToString (); // you can use filestream to upload files. } In the DragDrop event, you can get the file path dragged to the form, and then use filestream to upload the file.
C # NET drag files from the operating system and upload them to the server's html5 code
Drag-and-drop operations cannot be implemented unless you have installed the client on your own and dragged it to the client. Otherwise, the browser will think that you need to open the file you dragged and open it directly, rather than upload it.
Still use regular upload operations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
