Use uploadify in Asp.net Mvc for image scaling and saving

Introduction

This article mainly introduces how to use uploadify in the asp.net mvc project and implement simple proportional scaling and saving of images. I have sorted out some online resources for reference in this article. If you have any questions, please note.

Uploadify Introduction The new uploadify version changes the parameters.

This document uses v3.2. If you use a previous version, refer to Uploadify in asp.net mvc to upload files. For details about uploadify, refer to the JQuery upload plug-in Uploadify.

Uploadify APIs:

Options

Swf: relative path of the uploadify.swf File

Uploader: relative path of the background processing program

QueueID: ID of the file queue, which is consistent with the ID of the div storing the file queue.

Auto: true: upload directly. If this parameter is set to false, you must call the relevant method (see upload) to upload the file.

Multi: true: multi-File Upload is allowed; false: single-file upload is allowed.

FormData: passing additional parameters through form

Events

OnUploadSuccess: callback function for each successful upload

Methods

Settings: returns or updates the setting attributes of an uploadify instance.

Upload: uploads a specific file or all in the file queue.

Note:The cancel button in this transmission picture is missing. I changed it directly in uploadify.css.

The above parameters are required by the code in this article. For other parameters, refer to the official documentation.

 

Use uploadify in Mvc4 to introduce js and css files in the header of the title

Add control labels in View

    @Html.Label("*required an integer", new { id = "hval", style = "display:none;color:red;" })    @Html.Label("*required an integer", new { id = "wval", style = "display:none;color:red;" }) Upload Files 

Add js to the File control

$("#uploadify"'swf': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',              'uploader': '@Url.Action("Uploadify")',                                  'queueID': 'fileQueue',                                                  'auto': ,                                                           'multi': ,                                                           'onUploadSuccess':  s = filepath = $("#Filepath" filepaths = filepath + ";" + data;                                   (filepath.trim() == "") {                                                filepaths ="#Filepath""#fileimg").attr("src", filepaths.split(";")[0]);     

Note: The above uploader parameter requests a MVC method, here is the uploadify method of the current controller (my path is the default "{controller}/{action}/{id }");

Add verification and restrictions to pass additional parameters

$ (". Intonly "). keyup (. value =. value. replace (/[^ 0-9 \.] /g, '');" # uploadstart "). click () {($ ("# fileQueue" ).html (). trim () = "") {alert ("Select Upload file first" h = $ ("# h" w = $ ("# w" (h. trim () = "") {$ ("# hval" ).css ("display", "inline" "# hval" ).css ("display", "none" (w. trim () = "") {$ ("# wval" ).css ("display", "inline" "# wval" ).css ("display", "none "". intonly "" disabled ":" true "$ (". intonly ").css (" background-color "," # EFEEEF "" # uploadify "). uploadify ('settings', 'formdata' H': $ ("# h" 'W': $ ("# w" $ ("# uploadify "). uploadify ('upload ','*');

C # proportional scaling Image Algorithm

This method is based on a foreign website (the original article link). You can only scale the image proportionally, but it is not satisfactory. If you have any better methods, please advise.

         sourceWidth = sourceHeight = nPercent =  nPercentW =  nPercentH = = (()size.Width / (= (()size.Height / ( (nPercentH <== destWidth = ()(sourceWidth * destHeight = ()(sourceHeight *= ==, 

Process images in the Controller Method

ActionResult Uploadify (h =, w = get form value must have a default value, otherwise the error {filePath = (item = (postFile. contentLength = newFilePath = Request. applicationPath ++. format ((! {System. IO. directory. createDirectory (Server. mapPath (newFilePath);} file = newFilePath ++. format (, DateTime. now) ++ System. guid. newGuid () ++ postFile. fileName. split (= resizeImage (Image. fromStream (postFile. inputStream,), Size {Height = h, Width =}

After completion

Conclusion

So far, the use of uploadify is over. I graduated from the physics department for almost a year, and almost a year of entry. I am working hard to learn from the experts. I have been thinking about writing a blog since I came into contact with the blog Park and saw a great guy like Fish Li. This is also the first time I write a blog. If you have any questions, please correct me! Finally, I would like to thank TimYang, who frequently wrote blogs, for feeling strong positive energy from his blog. Thank you for choosing this blog site.

 

 

Attachment: source code download