File Upload ~ Uploadify upload Control

There are many implementation methods for file upload, such as the traditional form method, the popular flash method, and even the pure JS method. These methods are used to upload files, I think the main reason is that,Traditional upload does not support large files because it is a single-thread synchronization mechanism.When a large file is sent to the server through HTTP, the main thread of the server site will be greatly affected and blocking will occur. Therefore, many upload control operations are asynchronous, implemented in multiple threads.

Today, we will introduce a file upload control, which is Uploadify, which should be a flash asynchronous upload tool with good support for large files. So I chose it.

Related API Introduction

Uploader: Relative path of the uploadify.swf file. The swf file is a button with a text BROWSE. After clicking it, it fades out and opens the file dialog box. Default Value: uploadify.swf.
Script: Relative path of the background processing program. Default Value: uploadify. php
CheckScript: Used to determine the relative path of the background processing program for uploading the selected file on the server
FileDataName: Set a name to retrieve the data of the uploaded file in the server handler. The default value is Filedata.
Method: The default submission mode is Post or Get.
ScriptAccess:The access mode of the flash script file. If it is set to always in a local test, the default value is sameDomain.
Folder:The directory where the uploaded files are stored.
QueueID:The ID of the file queue, which is consistent with the ID of the div that stores the file queue.
QueueSizeLimit:When multiple files are allowed to be generated, set the number of selected files. Default Value: 999.
Multi:When set to true, multiple files can be uploaded.
Auto:Set to true. When a file is selected, it is uploaded directly. If it is set to false, You need to click the upload button to upload the file.

FileExt:Set the file type that can be selected, in the format of '*. jpg; *. gif, *. png '.

FileDesc:This attribute value is valid only after the fileExt attribute is set. It is used to set the prompt text in the Select File Dialog Box. For example, set fileDesc to "select Image File ",
SizeLimit:The size limit of the uploaded file.
SimUploadLimit:The default value is 1.
ButtonText:The text of the BROWSE button. Default Value: BROWSE.
ButtonImg:The path of the Browse button.
HideButton:If this parameter is set to true, the image of the Browse button is hidden.
Rolover:The values are true and false. If it is set to true, a reverse effect is displayed when you move the cursor over the Browse button.
Width:Set the browser button width. Default Value: 110.
Height:Set the height of the Browse button. Default Value: 30.
Wmode:Setting this parameter to transparent can make the flash background file of the browser button transparent, and the flash file will be set to the top level of the page. Default Value: opaque.
CancelImg: Select the close button icon for each file after the file is in the file queue.

Structure chart

HTML code

<Div> <div => <input type = name = id = style =>  </div> <div = style => <input id = type = =/> <a href => upload </a> | <a href => cancel upload </a> </div> <div id => </div>/ div>

JS Code

<Script type = "text/ecmascript"> "# custom_file_uploadEdu" 'upload': '/Scripts/Uploadify/uploadify.swf' 'script': '/ashx/UploadFile. ashx ''canonicalimbat': '/Scripts/Uploadify/uploadify-cancel.png ''folder':'/''queuesizelimit ': 1' simUploadLimit': 1' sizeLimit ': 1024*1024*5 'multi ': 'auto':, 'fileext ':'*. jpg ;*. gif ;*. jpeg ;*. mp4 ''filedesc': 'select an image or video ''' queueid': 'filequeue ''width': 110 'height': 30' buttontext ': 'select ''wmode': 'opaque ''' hideButton ': 'onselect': "# displayMsg" ).html ("Uploading ...... "'oncomplete': ary = response. split ('|' (ary [0] = "0") {alert (ary [1 (ary [0] = "1 ") {$ ("# displayMsg" successfully uploaded "" # ImagePath "). attr ("value", ary [1 "# ImagePath "). remove ("img "). next ("img "). show (). attr ({"style": "width: 50px; height: 50px;", "src": ary [1 {alert (ary [1 </script>

Background Processing Program (receiving stream, writing Stream)

        = "text/plain" UploadImpl().Upload(context, UpLoadType.ProductImage,  

UploadImpl class code = fileUploadSize ?? (Fields & Consts FileHostUri = System. Configuration. ConfigurationManager. deleettings [?? HttpContext. current. request. url. scheme ++ = Point (,); wRate =, hRate =, setRate = newWidth =, newHeight = image scaling CreateThumbnail (HttpPostedFile file, ImageSize imageSize, isw.scale, width = (height = (image. height> = height/(image. width> = width/(wRate! = | HRate! = (WRate >== () (image. width * = () (image. height * (height> = Convert. toInt32 (height/-newHeight/(width> = Convert. toInt32 (width/-newWidth/= Bitmap () (width), (= Rectangle (point. x, point. y, () (image. width * setRate), () (image. height * = [] bytes = fileName = name + imageSize. toString (); (FileStream stream = CreateThumbnail (HttpPostedFile file, ImageSize imageSize, CreateThumbnail (file, imag ESize, Upload (HttpContext context, UpLoadType type, = (files. Count = ArgumentNullException (path = + type. ToString ();(! File = files [(file! = & File. ContentLength> filename = context. Request. Form []. Split () [++ DateTime. Now. ToString (+ savePath = ImageUri = ++View Code