需要一款圖片上傳插件,但網路上沒有提供一款符合自己需求且好用的。於是就自己動手寫了一個,需要的朋友可以參考下
今天筆者需要一款圖片上傳插件,但是網路上沒有提供一款符合自己需求且好用的。於是就自己動手寫了一個。
方法1,只使用jquery程式碼,不用第三方外掛程式。程式碼如下
<p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> <input type="button" id="uploadButton" value="Upload" /> </p> <script type="text/javascript"> $(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").files; formdata.append("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; }); }); </script>
這種方法的缺點:由於IE6\8\9\不支援formdata,所以這個方法不支援IE9及以下版本
方法二:使用ajaxfileupload.js插件
ajaxfileupload.js
html程式碼:
<p> <label>ajax上传</label> <input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/> <img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" /> </p> <p> <label>最新修改人员:</label> <input readonly="readonly" type="text" size="30" /> </p> <p> <script type="text/javascript"> $(function() { $(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。 ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id")); }) }) function ajaxFileUpload(file_id, img_id) { jQuery.ajaxFileUpload({ url : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址 secureuri : false, //是否需要安全协议,一般设置为false fileElementId : file_id, //文件上传域的ID dataType : 'json', //返回值类型 一般设置为json success : function(data, status)//服务器成功响应处理函数 { if (data.error == 0) { $("#" + img_id).attr("src", data.url); } else { alert(data.message); } }, error : function(data, status, e)//服务器响应失败处理函数 { alert(e); } }) return false; } </script> </p> </p>
說明:這個方法目前測試支援IE8/9,谷歌,相容比方法1好。建議採用方法2
檔案上傳後台處理程式碼(asp.net版)
<%@ webhandler Language="C#" class="Upload" %> 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); //文件保存目录路径 String savePath = "attached/"; //文件保存目录URL String saveUrl = aspxUrl + "attached/"; //定义允许上传的文件扩展名 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"); extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 int maxSize = 1000000; this.context = context; HttpPostedFile imgFile = context.Request.Files["imgFile"]; if (imgFile == null) { showError("请选择文件。"); } String dirPath = context.Server.MapPath(savePath); if (!Directory.Exists(dirPath)) { showError("上传目录不存在。"); } String dirName = context.Request.QueryString["dir"]; if (String.IsNullOrEmpty(dirName)) { dirName = "image"; } if (!extTable.ContainsKey(dirName)) { showError("目录名不正确。"); } String fileName = imgFile.FileName; String fileExt = Path.GetExtension(fileName).ToLower(); if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) { showError("上传文件大小超过限制。"); } if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1) { showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。"); } //创建文件夹 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; } } }
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
#以上是自己動手打造ajax圖片上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章!