ajax无刷新上传
我们在使用上传控件的时候,会遇到刷新的问题,最近使用ajax做的上传,觉得效果还是很不错。
首先,我们需要在页面上放上上传控件;需要注意的是,我们必须放在form里面,实现表单上传。
<form class="picForm" name="uploadPic" enctype="multipart/form-data">
选择图片:<input type="file" class="file" name="picture" /><br />
</form>
选择图片:<input type="file" class="file" name="picture" /><br />
</form>
前台提交方法
function TajaxFileUpload() { var mypath = "../ajax/upload.ashx?fileName="+需要的参数; $("form[name='uploadPic']").ajaxSubmit({ url: mypath, type: 'POST', success: function (html, status) { if (status == "success") { html = html.replace(/</?[^>]*>/g, ''); //html = html.replace(/[ | ]* /g, ' '); var json = eval('(' + html + ')'); if (json.state == "success") {
//上传成功 }
else {//上传失败 } }
else { art.dialog.alert("请求数据失败"); } //stauts success } //submit success }); //ajaxSubmit } //t ajax
upload.ashx代码如下
using System; using System.IO; using System.Web; using System.Text; using System.Net; namespace BatchImageUpload { /// <summary> /// Summary description for upload /// </summary> public class upload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; try { if (context.Request.Files["picture"] == null) { //图片控件中没有选择图片 context.Response.Write("{state:'error',msg:'您还未选择图片'}"); } else { string fileName = context.Request.QueryString["fileName"]; HttpPostedFile pic = context.Request.Files["picture"]; string foldPath = HttpContext.Current.Server.MapPath("/") + @"OrderUserInfoImages"; foldPath = foldPath + fileName; DirectoryInfo di = new DirectoryInfo(foldPath); if (!di.Exists)//如果文件夹目录不存在 { di.Create();//新建文件夹 } string imageName = UpLoadImage(pic, foldPath); context.Response.Write("{state:'success',msg:'上传成功:" + imageName + "'}"); } } catch (Exception ex) { context.Response.Write("{state:'error',msg:'" + ex.Message + "'}"); } } #region 上传图片 /// <summary> /// 上传图片 /// </summary> /// <param name="imgfile">文件http流</param> /// <param name="nowpath">所需放置的文件路径</param> /// <returns>上传成功,返回字符串,否则,抛出异常</returns> public static string UpLoadImage(HttpPostedFile imgfile, string nowpath) { try { string serverPath = System.Web.HttpContext.Current.Server.MapPath("~"); string toFilePath = Path.Combine(serverPath, nowpath); //获取要保存的文件信息 FileInfo file = new FileInfo(imgfile.FileName); //获得文件扩展名 string fileNameExt = file.Extension; //验证合法的文件 if (CheckImageExt(fileNameExt)) { //生成将要保存的随机文件名 string fileName = GetImageName() + fileNameExt; //获得要保存的文件路径 string serverFileName = toFilePath + fileName; //物理完整路径 string toFileFullPath = serverFileName; //HttpContext.Current.Server.MapPath(toFilePath); //将要保存的完整文件名 string toFile = toFileFullPath;//+ fileName; ///创建WebClient实例 WebClient myWebClient = new WebClient(); //设定windows网络安全认证 方法1 myWebClient.Credentials = CredentialCache.DefaultCredentials; ////设定windows网络安全认证 方法2 imgfile.SaveAs(toFile); string relativePath =fileName; return relativePath; } else { throw new Exception("文件格式非法,请上传gif|jpg|bmp|png格式的文件。"); } } catch { throw; } } #endregion #region 图片上传格式和文件名 /// <summary> /// 检查是否为合法的上传图片 /// </summary> /// <param name="_fileExt"></param> /// <returns></returns> public static bool CheckImageExt(string _ImageExt) { string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".bmp", ".png" }; for (int i = 0; i < allowExt.Length; i++) { if (string.Compare(allowExt[i], _ImageExt, true) == 0) { return true; } } return false; } private static string GetImageName() { Random rd = new Random(); StringBuilder serial = new StringBuilder(); serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff")); serial.Append(rd.Next(0, 999999).ToString()); return serial.ToString(); } #endregion public bool IsReusable { get { return false; } } } }
单文件上传只需要按照这个方法就可以。如果要做到批量上传,需要动态添加上传控件,然后遍历上传控件坐上传功能即可