Scripts
--------
<script>
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
autoDiscover: false,
addRemoveLinks: true,
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 20,
url: "fileupload.ashx",
addRemoveLinks: true,
maxFiles: 5,
maxFilesize: 5,
dictDefaultMessage: "Drag or click to add photos",
// The setting up of the dropzone
init: function () {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function (file, xhr, formData) {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
formData.append('title', $("input[name=title]").val());
});
this.on("successmultiple", function (files, response) {
alert(response);
});
this.on("errormultiple", function (files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
fileupload.aspx
------------------
--------
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="Jquery/bootstrap.min.js"></script>
<link href="Jquery/bootstrap.min.css" rel="stylesheet" />
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" />
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
autoDiscover: false,
addRemoveLinks: true,
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 20,
url: "fileupload.ashx",
addRemoveLinks: true,
maxFiles: 5,
maxFilesize: 5,
dictDefaultMessage: "Drag or click to add photos",
// The setting up of the dropzone
init: function () {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function (file, xhr, formData) {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
formData.append('title', $("input[name=title]").val());
});
this.on("successmultiple", function (files, response) {
alert(response);
});
this.on("errormultiple", function (files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
fileupload.aspx
------------------
<form id="my-awesome-dropzone" class="dropzone">
<div>
<input type="text" name="title" placeholder="Title" />
<button id="submit-all" type="submit" class="button3" style="cursor: pointer">Post</button>
</div>
<div>
<div class="dropzone-previews" style="border: 1px dashed blue;"></div>
</div>
</form>
fileupload.ashx
---------------------
<%@ WebHandler Language="C#" Class="fileupload" %>
using System;
using System.Web;
using System.IO;
public class agoodthing : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
string title = context.Request["title"];
string photo_name = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss");
HttpPostedFile file = files[i];
//string fileExtension = file.ContentType;
string photo_box_id = photo_name ;
string fname = context.Server.MapPath("~/dump/" +photo_box_id+ file.FileName);
file.SaveAs(fname);
//context.Response.Write( title );
}
}
public bool IsReusable {
get {
return false;
}
}
}
