Shulou(Shulou.com)06/03 Report--

This article mainly introduces the "do-it-yourself ajax picture upload method tutorial", in the daily operation, I believe that many people have doubts in the do-it-yourself ajax picture upload method tutorial, the editor consulted all kinds of materials, sorted out simple and easy-to-use methods of operation, hoping to answer the "do-it-yourself ajax picture upload method tutorial" to help! Next, please follow the editor to study!

Method 1, use only jquery code, not third-party plug-ins. The code is as follows

Upload pictures

$(function () {('.inp _ fileToUpload') .change (function () {var formdata = new FormData (); var v_this = $(this); var fileObj= v_this.get (0) .files; url = "/ upload/upload_json.ashx"; / / var fileObj=document.getElementById ("fileToUpload") .change ("imgFile", fileObj [0]) JQuery.ajax ({url: url, type: 'post', data: formdata, cache: false, contentType: false, processData: false, dataType: "json", success: function (data) {if (data.error = = 0) {v_this.parent (). Children (".img _ upload"). Attr ("src", data.url); / / $("# img"). Attr ("src", data.url);}); return false;}))

Disadvantages of this method: because IE6\ 8\ 9\ does not support formdata, this method does not support IE9 and below

Method 2: use the ajaxfileupload.js plug-in

Ajaxfileupload.js

Html Code:

Ajax upload

The latest revision personnel:

(function () {$(".inp _ fileToUpload") .live ("change", function () {/ / now this has been applied to multiple file forms. AjaxFileUpload ($(this) .attr ("id"), $(this) .parent () .children (".img _ upload") .attr ("id")) })}) function ajaxFileUpload (file_id, img_id) {jQuery.ajaxFileUpload ({url:'/ upload/upload_json.ashx', / / the server-side request address for file upload secureuri: false, / / whether a security protocol is required Generally set to false fileElementId: file_id, / / File upload domain ID dataType: 'json', / / return value type is generally set to json success: function (data, status) / / Server successful response handler function {if (data.error = = 0) {$("#" + img_id) .attr ("src", data.url) } else {alert (data.message);}}, error: function (data, status, e) / / Server response failure handler function {alert (e);}}) return false;}

Description: this method currently supports IE8/9, Google, and compatibility is better than method 1. It is recommended to adopt method 2.

File upload background processing code (asp.net version)

Using System; using System.Collections; using System.Web; using System.IO; using System.Globalization; using LitJson; public class Upload: IHttpHandler {private HttpContext context; public void ProcessRequest (HttpContext context) {String aspxUrl = context.Request.Path.Substring (0, context.Request.Path.LastIndexOf ("/") + 1); / / File save directory path String savePath = "attached/"; / / File save directory URL String saveUrl = aspxUrl + "attached/" / / define the file extension Hashtable extTable = new Hashtable (); extTable.Add ("image", "gif,jpg,jpeg,png,bmp"); extTable.Add ("flash", "swf,flv"); extTable.Add ("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb") that are allowed to upload ExtTable.Add ("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); / / maximum file size int maxSize = 1000000; this.context = context; HttpPostedFile imgFile = context.Request.Files ["imgFile"]; if (imgFile = = null) {showError ("Please select a file.") ;} String dirPath = context.Server.MapPath (savePath); if (! Directory.Exists (dirPath)) {showError ("upload directory does not exist.") ;} String dirName = context.Request.QueryString ["dir"]; if (String.IsNullOrEmpty (dirName)) {dirName = "image";} if (! extTable.ContainsKey (dirName)) {showError ("incorrect directory name.") ;} String fileName = imgFile.FileName; String fileExt = Path.GetExtension (fileName). ToLower (); if (imgFile.InputStream = = null | | imgFile.InputStream.Length > maxSize) {showError ("upload file size exceeds the limit") ;} if (String.IsNullOrEmpty (fileExt) | | Array.IndexOf (String) extTable [dirName]). Split (','), fileExt.Substring (1). ToLower () =-1) {showError ("uploading file extension is not allowed.\ nOnly the format" + ((String) extTable [dirName]) + "is allowed.") ;} / / create folders dirPath + = dirName + "/"; saveUrl + = dirName + "/"; if (! Directory.Exists (dirPath)) {Directory.CreateDirectory (dirPath);} String ymd = DateTime.Now.ToString ("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); dirPath + = ymd + "/"; saveUrl + = ymd + "/"; if (! Directory.Exists (dirPath)) {Directory.CreateDirectory (dirPath);} String newFileName = DateTime.Now.ToString ("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; String filePath = dirPath + newFileName ImgFile.SaveAs (filePath); String fileUrl = saveUrl + newFileName; Hashtable hash = new Hashtable (); hash ["error"] = 0; hash ["url"] = fileUrl; context.Response.AddHeader ("Content-Type", "text/html; charset=UTF-8"); context.Response.Write (JsonMapper.ToJson (hash)); context.Response.End ();} private void showError (string message) {Hashtable hash = new Hashtable (); hash ["error"] = 1; hash ["message"] = message Context.Response.AddHeader ("Content-Type", "text/html; charset=UTF-8"); context.Response.Write (JsonMapper.ToJson (hash)); context.Response.End ();} public bool IsReusable {get {return true;} so far, the study of "do-it-yourself tutorial on how to upload ajax images" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.