要实现大文件上传必须配置webConfig例如：
<system.web> <compilation debug="true" targetFramework="4.5" /> <!--<httpRuntime targetFramework="4.5" />--> <httpRuntime targetFramework="4.5" maxRequestLength="1073741824" executionTimeout="3600" /> </system.web> <system.webServer> <security> <requestFiltering> <!--修改服务器允许最大长度--> <requestLimits maxAllowedContentLength="1073741824"/> </requestFiltering> </security> </system.webServer>
index页面
运用jQuery-file-Upload需要引用以下js
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery File Upload Demo</title> <link rel="stylesheet" href="~/JS/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="~/CSS/fileupload.css"> <script src="~/JS/jQuery.js"></script> <style> img { max-50px; overflow:hidden; margin:30px; } li { list-style:none; } .progress { 350px; margin-left: 76px; margin-top: -90px; display:none; } </style> </head> <body> <div class="container"> <h1>jQuery File Upload Demo</h1> <br> <div class="row fileupload-buttonbar"> <div class="col-lg-12"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files...</span> <input type="file" id="fileupload" name="files" multiple> </span> <button type="submit" class="btn btn-primary start"> <i class="glyphicon glyphicon-upload"></i> <span id="Start">Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span id="Cancle">Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="glyphicon glyphicon-trash"></i> <span id="Delete">Delete</span> </button> <input type="checkbox" class="toggle"> <div class="container"> <div class="row" id="imglist"> <img id="preview" src="" width="60" height="60" /> </div> <div class="progress"> <div class="progress-bar" style=" 0%;"> </div> </div> </div> </div> </div> </div>
</body>
<script type="text/javascript"> $('#fileupload').fileupload({ url: "/Home/img", Type: "POST", dataType: 'json', autoUpload: true, acceptFileTypes: "/(.|/)(gif|jpe?g|png|xlsx|mp4)$/i", add: function (e, data) { $("#Start").click(function () { data.submit(); }) }, success:function(response, status) { var obj = JSON.parse(response); var imgPath = obj["filePath"]; $("#imglist").append('<li><img src="' + imgPath + '" /> </li>'); }, done: function (e, data) { alert("upload finish"); }, error: function (error) { alert("error"); }, progressall: function (e, data) { //进度条显示 var progress = parseInt(data.loaded / data.total * 100, 10); $('.progress .progress-bar').css( 'width', progress + '%' ); $('.progress-bar').html( progress + '%' ); $('.progress ').css( 'display', 'block' ); } }); </script>
Controller
public JsonResult img(HttpPostedFileBase files)//, string deviceCode, string type { try { string localPath = "/uploads/images/" + DateTime.Now.ToString("yyyyMMdd"); string path = Server.MapPath("~" + localPath); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } TimeSpan ts = DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1)); string fileName = (long)ts.TotalMilliseconds + Path.GetExtension(files.FileName); files.SaveAs(path + "/" + fileName); return Json("{"filePath":"" + localPath + "/" + fileName + "","sourePath":"" + files.FileName + ""}"); } catch (Exception ex) { return null; } }