Problems with uploading images using uploadify in MVC,

Problems with uploading images using uploadify in MVC,

Problems with uploading images using uploadify in MVC

The first time I used uploadify to upload images, I encountered some tangled problems. I would like to share with you some of the following information, sorry for the poor literary talent. When you create a new project and reference the uploadify script, you do not need to talk about it. You can directly go to the topic:

The Index page contains the following code:

1 @ {2 ViewBag. title = "Index "; 3} 4 <br/> 5 <input id = "file_upload" type = "file" value = "Upload image"/> 6 7 <script src = "@ Url. content ("~ /Scripts/jquery-1.8.2.js ")"> </script> 8 <link href = "~ /Content/UploadJS/uploadify.css "rel =" stylesheet "/> 9 <script src = "~ /Content/UploadJS/jquery. uploadify. min. js "> </script> 10 <script type =" text/javascript "> 11 $ (function () {12 $ (" # file_upload "). uploadify ({13 swf: '@ Url. content ("~ /Content/UploadJS/uploadify.swf ") ', // The Flash14 uploader used for uploading:'/Home/upload', // server processing address 15 // The display parameter 16 width: 80, // The width of the button 17 height: 24, // The height of the button 18 buttonText: "Upload image", // The text on the button 19 buttonCursor: "hand ", // button Mouse icon 20 buttonClass: "up_button2", 21 fileObjName: 'filedata', // upload parameter name 22 // rule parameter 23 fileSizeLimit: "5000KB", 24 fileTypeExts: "*. jpg ;*. jpeg ;*. png ;*. gif ", // the file extension that can be uploaded is used together with the following 25 fileTypeDesc:" select jpg, jpeg, png, and gif files ", // file description 26 fileSizeLimit: "5 MB", // the size of the file to be uploaded 27 multi: false, // whether multiple files can be uploaded simultaneously 28 removeTimeout: onUploadSuccess: function (file, data, respose) {30 var obj = jQuery. parseJSON (data); // serialize the returned data to object 31 if (Obj. ret) {32 alert (obj. filePath); 33} 34 else {35 alert ("2"); 36} 37 38} 39}) 40}) 41 </script>Index page

The following is the Controller code:

1 public ActionResult Index () 2 {3 return View (); 4} 5 [HttpPost] 6 public ActionResult Upload (HttpPostedFileBase Filedata) {7 if (Filedata! = Null & Filedata. ContentLength> 0) 8 {9 // The root path for saving the uploaded file 10 string filePath = Server. MapPath ("~ /UploadImg/"); 11 if (! Directory. exists (filePath) 12 {13 Directory. createDirectory (filePath); 14} 15 string fileName = Path. getFileName (Filedata. fileName); // get the file named 16 string fileExtension = Path. getExtension (fileName); // get the file extension 17 string saveFileName = Guid. newGuid (). toString () + fileExtension; // name of the file to be saved 18 int fileSize = Filedata. contentLength/1024; 19 if (fileSize> 1024 | fileSize <= 2) 20 {21 return Json (new {ret = false, message = "File Upload Failed, select images smaller than 1 MB "}); 22} 23 else24 {25 Filedata. saveAs (filePath + saveFileName); 26 return Json (new {ret = true, FilePath = "/UploadImg/" + saveFileName }); 27} 28} 29 else30 {31 return Json (new {ret = false, message = "select the file to upload"}); 32} 33}Controller

Note that the Upload method must be case-insensitive and the parameter name to be received must be Filedata. We can see on the Index page that fileObjName is set in the script code: 'filedata', so the names received in the control must be the same. This attribute is not set on the Index page before, and its default name is "Filedata ", in this way, the Controller receives NUll objects;

Next, let's take a look at the Jquery reference problem on the Index page. If the correct page is referenced, the effect should be as follows:

 

From the Index page, we can see that I have referenced these three scripts:

In general, there is no problem with this reference, but the result of my page is as follows:

The style referenced by Uploadify is useless. Why? Use Google's F12 to track the two Jquery files referenced. What is the situation? The page is clearly referenced once. How can this problem be solved twice, but there are two facts, for example:

 

It can be seen that there are not only two identical Jquery files, but also one is referenced at the end of the page. Repeated references lead to incorrect loading of the upload button style. After a long struggle, I finally found the cause, originally, When I was creating a project, the template page was loaded by default; that is, _ Layout was loaded by default on the Index page. cshtml template to see the code on this page:

As shown in the figure, @ Scripts. Render ("~ /Bundles/jquery ") the code, which was originally the culprit, will reference the Jquery file by default and will be referenced at the end. We will comment out this sentence, everything is OK.

Next, let's talk about the irrelevant topic. We can see _ Layout. the cshtml template also contains the code "@ RenderSection (" scripts ", required: false)", which does not know exactly what to use, so I changed it to required: true: the next step is debugging and running, and an error occurs. Well, it is a question of Jquery reference. Next I will change the reference of the Index page to this:

Okay, no error is reported on the page, but the Referenced File and @ Scripts. Render ("~ /Bundles/jquery ") the referenced Jquery file is at the end of the page, so that my upload button still has no style and cannot be asynchronously uploaded. Well, after talking so much nonsense, I finally want my friends who have encountered such problems for the first time to pay more attention to the default loading of template pages and Jquery references.

What's wrong? I hope you can help us to point out that we can share and grow together.