MVC + AjaxFileUpload file upload, mvcajaxfileupload

MVC + AjaxFileUpload file upload, mvcajaxfileupload

We will share with you the ajaxfileupload File Upload plug-in. Baidu has a lot of amazing File Upload plug-ins. Why do we choose this plug-in?

The reason is that we tried to use a lot of flash-based upload plug-ins before, but due to compatibility, applicability and many other problems, we finally chose-ajaxfileupload. js, because it uses native input label implementation and has good compatibility, I will not talk much about its principles and usage. Many great gods have thoroughly analyzed it. I would like to share with you the various pitfalls encountered when using it. I hope you can avoid them when using it.

 

1. Type Problems

For example, most data on the Internet uses the json type of dataType.

However, if the json format is used, the Firefox browser will parse the error and prompt the download.

Solution:

1. Using dataType: "html", some netizens also said that in some browsers, html must be written into HTML in a large way. At present, this problem has not been found.
2. When the Controller returns Json data, handle the ContentType:Return Json (new {Success = true, Message = "File Uploaded successfully"}, "text/html ");

 

2. Plug-in adjustment

When downloaded for use, you need to check the code in the plug-in:Var io = document. createElement ('<iframe id = "' + frameId + '" name = "' + frameId + '"/> ');Changed:Var io = document. createElement ("iframe ");Io. id = frameId;Io. name = frameId;
In some IE versions, the first code prompts "InvalidCharacterError" and thus cannot be run.

 

3. input transparency

First, list a usage,

<Input type = "file" id = "upload"> <input type = "button" value = "upload" onlick = "document. getElementById ('upload '). click () "/> for example, click the button to simulate and click the input/file tag to select the file upload,This method cannot be executed in IE8.The reason is that IE8 has strict requirements. due to security restrictions, you cannot change the value or trigger a change event.

Solution: Use the input transparency Method

. File_btn_visible {position: relative; top:-30px; left: 0; width: 80px; height: 30px; cursor: pointer; opacity: 0; filter: alpha (opacity = 0 );}This means that the input [type = file] label is placed on the Custom button through the css style, and the input transparency is set to 0 (opacity: 0; filter: alpha (opacity = 0). When you click the button, the file tag is actually clicked, so there will be no problem.

The adjusted plug-in is compatible with ie7/8/9/10/11, firefox, chrome, and other browsers. Note that the jQuery version must be earlier than 2.0. The later version of jQuery does not support IE6/7/8.
Although the ajaxfileupload function is not powerful with other flash controls, it is very effective for uploading common single files. application scenarios such as uploading images, uploading user ID cards, common images, and files
The above are some problems encountered in the actual development process. If you have any other questions, leave a message on the public account.

Http://mp.weixin.qq.com/s? _ Biz = MzIzNTE2OTk1MA ==& mid = 402768932 & idx = 1 & sn = 0f091d8a9ebf006f5e5d128304d06e63 # rd

You can scan the QR code to add a CodeL public account and leave a message for related resources or other questions. (Public Account: codelir)

Scan to get more development resources: