标签:led sage 上传文件 pat his script response style change
1、说明
ajaxfileupload.js是一款jQuery插件,用于通过ajax上传文件。
下载地址:http://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip
2、使用方法
首先引用js脚本
<script src="Scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script> <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $("#btnUpload").on(‘click‘, DoUpload); }) function DoUpload() { var image = $("#txtPath").val(); if ($.trim(image) == "") { alert("请选择文件!"); return; } $.ajaxFileUpload( { url: ‘Handler/FileUploadHandler.ashx?type=Attachment‘, secureuri: false, fileElementId: $("#fleFile").attr("id"), dataType: ‘json‘, success: function (data, status) { if (data.url === "") { alert("上传失败!"); } else { alert("上传成功!"); } }, error: function (result) { alert("上传失败!"); } }); } </script>
然后是html代码
<div id="ImageMaintain"> <input type="hidden" name="hidImgUrl" id="hidImgUrl" value="" /> <div id="uploadarea"> <input id="txtPath" type="text" disabled="disabled" /> <input id="fleFile" type="file" name="fleFile" onchange="document.getElementById(‘txtPath‘).value = this.value;return false;" /> <input id="btnSelect" type="button" value="选择" class="button" style="width: 60px;" /> <input id="btnUpload" type="button" value="上传" class="button" style="width: 60px;" /> </div> </div>
最后是一般处理程序
<%@ WebHandler Language="C#" Class="FileUploadHandler" %> using System; using System.Web; using System.IO; public class FileUploadHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string strMessage = string.Empty; string strUrl = string.Empty; string strFloderName = "Upload"; string strNewFilePath = string.Empty; string strFileName = Path.GetFileName(context.Request.Files[0].FileName); string strOldFileName = Path.GetFileName(context.Request.Files[0].FileName); int intFileSize = context.Request.Files[0].ContentLength; string data = ""; if (context.Request.Files.Count > 0 && strFileName != "") { string strExt = Path.GetExtension(context.Request.Files[0].FileName); strExt = strExt.TrimStart(‘.‘).ToLower(); strFloderName = strFloderName + "/" + "File/" + DateTime.Now.ToString("yyyyMMdd"); string path = HttpContext.Current.Server.MapPath("../" + strFloderName); try { strFileName = Guid.NewGuid().ToString() + ("." + strExt); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } strNewFilePath = Path.Combine(path, strFileName); context.Request.Files[0].SaveAs(strNewFilePath); } catch (Exception ex) { strMessage = "保存失败"; strUrl = string.Empty; } } strMessage = ""; strUrl = strFloderName + "/" + strFileName; data = "{\"strUrl\":\"" + strUrl + "\",\"strMessage\":\"" + strMessage + "\"}"; context.Response.Write(data); context.Response.End(); } public bool IsReusable { get { return false; } } }
3、图片上传
这里会把DEMO上传至博客园,下载地址:http://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip
标签:led sage 上传文件 pat his script response style change
原文地址:http://www.cnblogs.com/lengzhan/p/6611704.html