Mvc3 + Ajax Image Upload Summary

Method 1: uploadify plug-in

1. There are two types of Ajax post data to the background: Text and big data file images. Ajax cannot directly upload big data files. It can only be implemented using plug-ins.

@ {Viewbag. title = "Index ";} <H2> index </H2> <SCRIPT src = "http://www.cnblogs.com/Scripts/swfobject.js" type = "text/JavaScript"> </SCRIPT> <SCRIPT src = "http://www.cnblogs.com/Scripts/jquery.uploadify.v2.1.0.min.js" type = "text/JavaScript "> </SCRIPT> <link href =" http://www.cnblogs.com/Content/uploadify.css "rel =" stylesheet "type =" text/CSS "/> <style type =" text/CSS ">. textstyle1 {color: red; font-weight: B Old ;}. textstyle2 {color: green; font-weight: bold ;}</style> <SCRIPT type = "text/JavaScript" >$ (function () {// upload $ ('# fileinput1 '). uploadify ({'upload': '/content/uploadify.swf', 'script': '/upload/addpic', 'folder': '/upload', 'cancelim ': '/content/cancel.png', 'fileext ':'*. XLS ', 'filedesc ':'*. XLS ', 'sizelimmit': 1024*1024*4, // 4 m' multi ': false, 'oncomplete': Fun}); function fun (Event, queueid, fileobj, response, data) {If (response! = "") {Showinfo ("uploaded successfully" + response, true); // showinfo method setting upload result} else {showinfo ("An error occurred while uploading the file! ", False) ;}/// display the prompt information. textstyle2 is green, that is, the correct information. textstyl1 is red, that is, the error message function showinfo (MSG, type) {var msgclass = type = true? "Textstyle2": "textstyle1"; $ ("# result "). removeclass (); $ ("# result "). addclass (msgclass); $ ("# result" cmd.html (MSG);} // if the file is blank when you click 'import file', the system prompts function checkimport () {If ().trim(('{fileinput1queue'{.html () = "") {alert ('select the file to import first! '); Return false;} return true ;} </SCRIPT> <div> <input type = "text" id = "test"/> <p> <input id = "fileinput1" name = "fileinput1" type = "File "/> </P> <P style =" margin-top: 5px; font-size: 14px; font-weight: bold; "> <a href =" javascript: If (checkimport () {$ ('# fileinput1 '). uploadifysettings ('scriptdata', {'name': $ ('# test '). val ()}); $ ('# fileinput1 '). uploadifyupload () ;}"> Import file </a> </P> <P style = "margin-top: 5px; font-size: 14px; font-weight: bold; "> <span id =" result "> </span> </P> </div>

background Code :

Namespace qdxy. controllers {public class uploadcontroller: controller {// get:/upload/Public actionresult index () {return view ();} [httppost] public jsonresult addpic2 (httppostedfilebase context) {int S = request. contentlength; // string filename = path. getfilename (upimg. filename); // string filephysicalpath = server. mappath ("~ /Upload/"+ filename); // string name =" ", message =" "; // byte [] bytes = new byte [] {}; // try // {// upimg. saveas (filephysicalpath); // name = path. getfilename (filename); // bytes = encoding. unicode. getbytes ("image added successfully"); // For (INT I = 0; I <bytes. length; I + = 2) // {// message + = "\ U" + bytes [I + 1]. tostring ("X "). padleft (2, '0') + bytes [I]. tostring ("X "). padright (2, '0'); //} // catch (exception ex )// {// Message = ex. message; //} return JSON (New {// picpath = "/upload/" + filename, // message = message });} [httppost] public jsonresult addpic (httppostedfilebase filedata, string folder, string name) {String title = string. empty; string message = string. empty; // map the uploaded image to the path of the physical hard disk. String storefilepath = server. mappath ("~ /Upload/"+ filedata. filename); try {// Method for saving the image filedata. saveas (storefilepath); Title = path. getfilename (folder); byte [] bytes = encoding. unicode. getbytes ("image uploaded successfully"); // convert the image to Unicode for easy transmission/** Unicode and Chinese character encoding tips: encode Chinese Characters in unicode format, for example: the "King" is encoded as "\ u738b". The Unicode character starts with "\ U" and is followed by four digits or letters *. All characters are hexadecimal digits, each two digits represents a number less than 256. * A Chinese character is composed of two characters, so it is easy to understand that * "738b" is two characters, namely "73" and "8b ". * When converting the Unicode character encoding content to Chinese characters, * the characters are processed forward from the back. Therefore, you need to combine the characters in the order of "8b" "73" * to obtain Chinese characters **/For (INT I = 0; I <bytes. length; I + = 2) {message + = "\ U" + bytes [I + 1]. tostring ("X "). padleft (2, '0') + bytes [I]. tostring ("X "). padright (2, '0') ;}} catch (exception ex) {message = ex. message;} return JSON (New {Title = title, message = message });}}}

Originally, I wanted to use JSON to return the upload result. However, it seems that the client's uploadify plug-in method does not support JSON format data. Further research is required.

Method 2: Using jqueryform plug-in For details, see: http://www.cnblogs.com/kfx2007/archive/2012/08/27/2658325.html

This method uses form to submit big data to the background.