<div>
<input type="file" name="MyFile" id="check"/> <br/>
<a href="#" id="Checkupload" > Start checking and uploading </a>
</div>
@section scripts
{
<script src="~/scripts/jquery-1.9.1.min.js" ></script>
<script src="~/scripts/jquery-ui-1.9.2.min.js" ></script>
<script src="~/scripts/jquery.fileupload.js" ></script>
<script src="~/scripts/jquery.fileupload-ui.js" ></script>
<script src="~/scripts/jquery.iframe-transport.js" ></script>
<script type="Text/javascript" >
var jqxhrdata;
$ (function () {
Initsimplefileupload ();
Initfileuploadwithcheck ();
Simple upload
$ (' #simpleupload '). On (' click ', Function () {
if (jqxhrdata) {
Jqxhrdata.submit ();
}
False
});
Check the picture file type and size
$ (' #checkupload '). On (' click ', Function () {
if (jqxhrdata) {
True
var uploadfile = jqxhrdata.files[0];
if (! ( /\. (gif|jpg|jpeg|tiff|png) $/i). Test (Uploadfile.name)) {
Alert (' Allow image format Gif|jpg|jpeg|tiff|png ');
False
4mb
Alert (' picture size cannot be greater than 4 MB ');
False
}
if (isstartupload) {
Jqxhrdata.submit ();
}
}
False
});
});
Simple upload
function Initsimplefileupload () {
$ (' #simple '). FileUpload ({
' @Url. Action ("UploadFile", "File") ',
' JSON ',
Add:function (E, data) {
Jqxhrdata = data;
},
Done:function (event, data) {
if (data.result.isUploaded) {
alert (data.result.message);
else {
alert (data.result.message);
}
},
Fail:function (event, data) {
if (data.files[0].error) {
alert (data.files[0].error);
}
}
});
}
Check the picture file type and size
function Initfileuploadwithcheck () {
$ (' #check '). FileUpload ({
' @Url. Action ("UploadFile", "File") ',
' JSON ',
Add:function (E, data) {
Jqxhrdata = data;
},
Done:function (event, data) {
if (data.result.isUploaded) {
alert (data.result.message);
else {
alert (data.result.message);
}
},
Fail:function (event, data) {
if (data.files[0].error) {
alert (data.files[0].error);
}
}
});
}
</script>
}
Corresponding interface:
-filecontroller
Using System.IO;
Using System.Linq;
Using System.Web;
Using SYSTEM.WEB.MVC;
Namespace Mvcapplication1.controllers
{
Class Filecontroller:controller
{
Public ActionResult Index ()
{
return View ();
}
[HttpPost]
Public ActionResult UploadFile ()
{
HttpPostedFileBase myFile = request.files["MyFile"];
False
"Upload failed";
Null && Myfile.contentlength! = 0)
{
String pathforsaving = Server.MapPath ("~/uploads");
if (this. Createfolderifneeded (pathforsaving))
{
Try
{
Myfile.saveas (Path.Combine (pathforsaving, myfile.filename));
True
"Upload success";
}
catch (Exception ex)
{
String. Format ("Upload file failed: {0}", ex.) Message);
}
}
}
Return Json (new {isuploaded = isuploaded, message = message});
}
<summary>
Check if you want to create an upload folder
</summary>
<param name= "path" > Path </param>
<returns></returns>
BOOL Createfolderifneeded (string path)
{
True
if (! Directory.Exists (PATH))
{
Try
{
Directory.CreateDirectory (path);
}
catch (Exception)
{
TODO: Handling Exceptions
False
}
}
return result;
}
}
}
-Also, you need to set the maximum allowable file size in the configuration file
<system.web>
<!--10240 Kb = ten mb-->
"10240"/>
...
</system.web>
-Results
After uploading successfully, more uploads folder:
Upload PDF format, error:
MVC File Upload-asynchronous upload with jquery and client authentication type and size