Home > Developer > Web Develop
How ajax uploads files and how ajax uploads files
Ajax is already common, but it is not involved in uploading files using ajax. I only know that it is complicated. Uploading files is different from uploading normal form data and must be specially processed, I Know That ajax uses the upload function to apply a virtual iframe, but I found it on the internet due to project requirements. I did not expect to find two jquery plug-ins that support ajax file upload, jquery. uploadify. js and dropzone. min. both js and ajax can be used to upload files, and the effect is good.
1. UseUpload files using jquery. uploadify. js
This upload method uses Flash, so you need to reference a special js file swfobject. js, the earlier version needs to be referenced. The later version of this file is already included in jquery. uploadify. js is in progress. In addition, the parameters of earlier versions and later versions are not the same.
Complete foreground code using Uploadify v3.2.1
<Html xmlns = "http://www.w3.org/1999/xhtml">
Uploadify v2.1.0
Because swfobject. js is not available, you need to add references.
<script src="Scripts/swfobject.js" type="text/javascript"></script>Other parameters are also different, such as uploader and scriptComplete front-end code
<Html xmlns = "http://www.w3.org/1999/xhtml">
2. Use dropzone. min. js to upload filesFlash is not used, But browser requirements are relatively high. For example, IE10 or above is supported. html5 technology should be used.
Complete front-end code,
<Html xmlns = "http://www.w3.org/1999/xhtml">
3. background processing codePublic class Handler1: IHttpHandler {public void ProcessRequest (HttpContext context) {string operatype = context. request. queryString ["OperationType"]; if (operatype = "upfile") {HttpPostedFile file = context. request. files ["FileData"]; if (file! = Null) {string fullPath = System. IO. path. combine (System. IO. path. combine (AppDomain. currentDomain. baseDirectory, "update"), DateTime. now. date. toString ("yyyyMMdd"); file. saveAs (fullPath + file. fileName) ;}} context. response. contentType = "text/plain"; context. response. write ("uploaded successfully");} public bool IsReusable {get {return false ;}}}
Source code download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
