Use of the attachment Upload Component uploadify Based on MVC4 + EasyUI Web development framework, mvc4uploadify

Use of the attachment Upload Component uploadify Based on MVC4 + EasyUI Web development framework, mvc4uploadify

1. Description and Script Reference of uploadify

Uploadify is a famous JQuery upload plug-in. Using Flash technology, Uploadify is beyond the browser's restrictions, controlling the entire upload process and implementing the client's refreshing file uploads, in this way, the upload progress is controlled on the client. Therefore, you must first determine that the Adobe Flash plug-in has been installed in the browser.

Uploadify currently has two versions, Flash-based and HTML5-based paid. We use the free version, and the current version is v3.2.1.

This component requires the support of the Jquery library. In general, you need to add the Jquery js library, as shown below:

<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>

However, because my Web development framework is based on EasyUI, the relevant class libraries are usually referenced at the beginning of the Web page, and Jquery class libraries are already included, as shown below.

@ * Add a JS file for Jquery, EasyUI, and easyUI language packs * @ <script type = "text/javascript" src = "~ /Content/JqueryEasyUI/jquery. min. js "> </script> <script type =" text/javascript "src = "~ /Content/JqueryEasyUI/jquery. easyui. min. js "> </script> <script type =" text/javascript "src = "~ /Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js "> </script>

Token:

@ * Added support for the uploadify control * @ * <script type = "text/javascript" src = "~ /Scripts/jquery-2.0.3.min.js "> </script> * @ <script type =" text/javascript "src = "~ /Content/JQueryTools/uploadify/jquery. uploadify. js "> </script> <link href = "~ /Content/JQueryTools/uploadify/uploadify.css "rel =" external nofollow "rel =" stylesheet "type =" text/css "/>

2. Use of the Upload Component uploadify on the Web interface

First, we need to place two controls in the HTML code: one for uploading, the other for displaying the uploaded list, and the other for adding and canceling upload buttons, as shown below.

<Tr> <th> <label for = "Attachment_GUID"> upload attachments: </label> </th> <td> <div> <input class = "easyui-validatebox" type = "hidden" id = "Attachment_GUID" name = "Attachment_GUID"/> <input id = "file_upload" name = "file_upload" type = "file" multiple = "multiple"> <a href = "javascript: void (0) "rel =" external nofollow "rel =" external nofollow "class =" easyui-linkbutton "id =" btnUpload "data-options =" plain: true, iconCls: 'icon-save' "onclick =" javascript: $ ('# file_upload '). uploadify ('upload', '*') "> upload </a> <a href =" javascript: void (0) "rel =" external nofollow "rel =" external nofollow "class =" easyui-linkbutton "id =" btnCancelUpload "data-options =" plain: true, iconCls: 'icon-cancel' "onclick =" javascript: $ ('# file_upload '). uploadify ('cancel ','*') "> cancel </a> <div id =" fileQueue "class =" fileQueue "> </div> <div id =" div_files "> </div> <br/> </div> </td> </tr>

The interface effect Initialization is as follows:

Of course, next we need to add the corresponding script code for file upload initialization, as shown below.

<Script type = "text/javascript"> $ (function () {// Add an attachment management interface $ ('# file_upload '). uploadify ({'swf ':'/Content/JQueryTools/uploadify/uploadify.swf ', // path of the FLash file 'buttontext': 'browsed', // button text 'upload ': '/FileUpload/upload', // Action for processing file Upload 'queueid': 'filequee', // queue ID 'queuesizelimit': 10, // The maximum number of files that can be uploaded in the queue. The default value is 999 'auto': false. // select whether to automatically upload the file. The default value is true 'multi ': true, // check whether multiple options are selected. The default value is true 'removecompleted': true, // Whether to remove the sequence after completion. The default value is true 'filesizelimmit ': '10mb'. // the size of a single file. The value 0 indicates no limit. The sequence can be KB, MB, 'filetypedesc': 'image files', // file description 'filetypeexists ':'*. gif ;*. jpg ;*. png ;*. bmp ;*. tif ;*. doc ;*. xls ;*. zip ', // the filename suffix filter for uploading 'onqueuecomplete': function (event, data) {// event ShowUpFiles ($ ("# Attachment_GUID") After all queues are completed "). val (), "div_files"); // update the list of uploaded files after completion $. messager. alert ("prompt", "Upload complete! "); // Prompt complete}, 'onuploadstart': function (file) {$ (" # file_upload "). uploadify ("settings", 'formdata', {'folder': 'policy', 'guid': $ ("# Attachment_GUID "). val ()}); // dynamically passing parameters}, 'onuploaderror': function (event, queueId, fileObj, errorObj) {// alert (errorObj. type + ":" + errorObj.info) ;}}); </script>

In the above script, there are comments. You can understand the relevant attributes at a Glance. If you do not understand the attributes, you can go to the official website to find them. It is worth noting that

'uploader': '/FileUpload/Upload'

This line is used to submit the file to the MVC Action for processing. We can simply process it in the Upload of the controller FileUpload.

In addition, after the attachment is uploaded, We need to update the interface to display the uploaded list. Then we need to add the following function to process it.

'onQueueComplete': function (event, data) { 

Finally, it is worth noting that during file upload, We need to dynamically obtain the values of some elements on the interface and pass them as parameters, then we need to process the following in the onUploadStart function.

$ ("# File_upload "). uploadify ("settings", 'formdata', {'folder': 'policy', 'guid': $ ("# Attachment_GUID "). val ()}); // dynamically transmits Parameters

3. Upload the C # background processing code of uploadify.

In the above passed parameters, I used a Chinese value. Generally, Chinese characters are garbled in the background. Therefore, we need to set the content format in the Action Function of the controller, as shown below.

ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");ControllerContext.HttpContext.Response.Charset = "UTF-8";

The background processing Action code of the controller FileUpload is complete as follows:

Public class FileUploadController: BaseController {[AcceptVerbs (HttpVerbs. Post)] public ActionResult Upload (HttpPostedFileBase fileData, string guid, string folder) {if (fileData! = Null) {try {ControllerContext. httpContext. request. contentEncoding = Encoding. getEncoding ("UTF-8"); ControllerContext. httpContext. response. contentEncoding = Encoding. getEncoding ("UTF-8"); ControllerContext. httpContext. response. charset = "UTF-8"; // File Upload path string filePath = Server. mapPath ("~ /UploadFiles/"); DirectoryUtil. assertDirExist (filePath); string fileName = Path. getFileName (fileData. fileName); // the name of the original file string fileExtension = Path. getExtension (fileName); // file extension string saveName = Guid. newGuid (). toString () + fileExtension; // save the file name FileUploadInfo info = new FileUploadInfo (); info. fileData = ReadFileBytes (fileData); if (info. fileData! = Null) {info. fileSize = info. fileData. length;} info. category = folder; info. fileName = fileName; info. fileExtend = fileExtension; info. attachmentGUID = guid; info. addTime = DateTime. now; info. editor = CurrentUser. name; // logon user // info. owner_ID = OwerId; // The owner Table Record ID CommonResult result = BLLFactory <FileUpload>. instance. upload (info); if (! Result. success) {LogTextHelper. error ("failed to upload file:" + result. errorMessage);} return Content (result. success. toString ();} catch (Exception ex) {LogTextHelper. error (ex); return Content ("false") ;}} else {return Content ("false") ;}} private byte [] ReadFileBytes (HttpPostedFileBase fileData) {byte [] data; using (Stream inputStream = fileData. inputStream) {MemoryStream memoryStream = inputStream as MemoryStream; if (memoryStream = null) {memoryStream = new MemoryStream (); inputStream. copyTo (memoryStream);} data = memoryStream. toArray ();} return data ;}

4. Upload the uploadify component on the Web development framework Interface

The following figure shows the interface effect of the Upload Component in the Web development framework. The attachment is displayed in the overall list.

The attachment editing and uploading interfaces are as follows.

The effect of viewing the attachment information is as follows:

Summary

The above section describes how to use the attachment Upload Component uploadify Based on the MVC4 + EasyUI Web development framework. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!