• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    自己动手打造ajax图片上传(网上没有的)

    今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。

    方法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> 
    div> 
    
    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> 
    /div> 
    /div>


    说明:这种方法目前测试支持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; 
    } 
    } 
    }
    您可能感兴趣的文章:
    • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
    • AjaxUI:鼠标拖拽
    • jQuery Ajax 上传文件处理方式介绍(推荐)
    • Jquery ajaxsubmit上传图片实现代码
    • php+ajax实现图片文件上传功能实例
    • jQuery Ajax文件上传(php)
    • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
    • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
    • ajax实现异步文件或图片上传功能
    • 简单实现ajax拖拽上传文件
    上一篇:JS AJAX前台如何给后台类的函数传递参数
    下一篇:ajax请求post和get的区别以及get post的选择
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    自己动手打造ajax图片上传(网上没有的) 自己,动手,打造,ajax,图片,