ajax图片上传，图片异步上传，更新

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax图片上传，图片异步上传，更新，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
继承前文： 图片上传_ajax上传之实际应用(附上Demo)
直接上源码吧：

js源码：

/// <reference path="jquery-1.8.3.js" />
/// <reference path="ajaxForm/jquery.form.js" />

/*!
 * jQuery upload
 * 用于上传单个文件，上传成功后,返回文件路径。
 * 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件
 *
 * Date: 2014/4/23
 */
/*
使用:
html:
<div style="width: 100%; float: left;">
    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />
    <div class="imgdiv"></div>
    <span class="img_span">
        <input type="file" name="file" />
    </span>
    
    <input type="button" value="上传" class="upload" />
</div>
<div style="width: 100%; float: left;">
    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />
    <div class="imgdiv"></div>
    <span class="img_span">
        <input type="file" name="file" />
    </span>
    
    <input type="button" value="上传" class="upload" />
</div>

js:

$(document).ready(function () {
        
    //$(".upload").upload({
    //    uploadData: { id: "12233" },//    successFn: function (response,statusText,xhr,$this) {
    //        alert(response.Data.RelativePath)
    //    },//    deleteData: { id: function () { return "asdfasdf" } }
    //});
  
    $(".upload").upload({
        uploadData: { id: "12233" },successFn: "success",//可以是字符串
        deleteData: { id: function () { return "asdfasdf" } }
    });
});

//上传成功后执行该函数
function success(response,$this) {
    //比如插入编辑器
    alert(response.Data.RelativePath + $this.attr("value"))
}
*/

(function ($) {
    $.extend($.fn,{
        upload: function (settings) {

            var options = $.extend({
                fileType: "gif|jpg|jpeg|png|bmp",//允许的文件格式
                uploadUrl: "/ajax/handler.ashx?action=uploadfile",//上传URL地址
                deleteUrl: "/ajax/handler.ashx?action=deletefile",//删除URL地址
                width: "",//图片显示的宽度
                height: 100,//图片显示的高度
                imgSelector: ".imgdiv",//图片选择器
                uploadData: {},//上传时需要附加的参数
                deleteData: {},//删除时需要附加的参数
                deleteFn: function ($parent,showMessage) {             //删除图片的方法(默认方法使用POST提交)
                    methods.deleteImage($parent,showMessage);
                },beforeSubmitFn: "beforeUpload",//上传前执行的方法 原型 beforeSubmit(arr,$form,options);
                successFn: "uploadSuccess",//上传成功后执行的方法 uploadSuccess(response,$this)
                errorFn: "uploadError"                                  //上传失败后执行的方法
            },settings);

            //上传准备函数
            var methods = {
                //验证文件格式
                checkFile: function (filename) {
                    var pos = filename.lastIndexOf(".");
                    var str = filename.substring(pos,filename.length);
                    var str1 = str.toLowerCase();
                    if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }
                    var re = new RegExp("\.(" + options.fileType + ")$");
                    return re.test(str1);
                },//创建表单
                createForm: function () {
                    var $form = document.createElement("form");
                    $form.action = options.uploadUrl;
                    $form.method = "post";
                    $form.enctype = "multipart/form-data";
                    $form.style.display = "none";
                    //将表单加当document上，
                    document.body.appendChild($form);  //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。
                    return $($form);
                },//创建图片
                createImage: function () {
                    //不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高
                    var img = $(document.createElement("img"));
                    img.attr({ "title": "双击图片可删除图片！" });
                    if (options.width !== "") {
                        img.attr({ "width": options.width });
                    }
                    if (options.height !== "") {
                        img.attr({ "height": options.height });
                    }
                    return img;
                },showImage: function (filePath,$parent) {
                    var $img = methods.createImage();
                    $parent.find(options.imgSelector).find("img").remove();
                    //要先append再给img赋值，否则在ie下不能缩小宽度。
                    $img.appendTo($parent.find(options.imgSelector));
                    $img.attr("src",filePath);
                    this.bindDelete($parent);
                },bindDelete: function ($parent) {
                    $parent.find(options.imgSelector).find("img").bind("dblclick",function () {
                        options.deleteFn($parent,true);
                    });
                },deleteImage: function ($parent,showMessage) {
                    var $fileInput = $parent.find("input:hidden");
                    if ($fileInput.val() !== "") {

                        var data = $.extend(options.deleteData,{ filePath: $fileInput.val(),t: Math.random() });

                        $.post(options.deleteUrl,data,function (response) {

                            if (showMessage) { alert(response.MessageContent) }

                            if (response.MessageType == 1) {
                                $fileInput.val("");
                                $parent.find(options.imgSelector).find("img").remove();
                            }
                        },"JSON");
                    }
                },onload: function ($parent) {
                    var hiddenInput = $parent.find("input:hidden");
                    if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {
                        var img = methods.createImage();
                        if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); }
                        //要先append再给img赋值，否则在ie下不能缩小宽度。 
                        img.appendTo($parent.find(options.imgSelector));
                        img.attr("src",hiddenInput.val());
                        methods.bindDelete($parent);
                    }
                }
            };
            //上传主函数
            this.each(function () {
                var $this = $(this);
                methods.onload($this.parent());
                $this.bind("click",function () {
                    var $fileInput = $(this).parent().find("input:file");
                    var fileBox = $fileInput.parent();

                    if ($fileInput.val() === "") {
                        alert("请选择要上传的图片！");
                        return false;
                    }
                    //验证图片
                    if (!methods.checkFile($fileInput.val())) {
                        alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");
                        return false;
                    }
                    //若隐藏域中有图片，先删除图片
                    if ($fileInput.val() !== "") {
                        options.deleteFn($this.parent(),false);
                        //methods.deleteImage($this.parent(),false);
                    }

                    //创建表单
                    var $form = methods.createForm();

                    //把上传控件附加到表单
                    $fileInput.appendTo($form);
                    fileBox.html("<img src=\"/admin/styles/images/loading.gif\" />正在上传...");
                    $this.attr("disabled",true);

                    //构建ajaxSubmit参数
                    var data = {};
                    data.data = options.uploadData;
                    data.type = "POST";
                    data.dataType = "JSON";
                    //上传前
                    data.beforeSubmit = function (arr,options) {

                        var beforeSubmitFn;
                        try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };
                        if (beforeSubmitFn) {
                            var $result = beforeSubmitFn(arr,options);
                            if (typeof ($result) == "boolean")
                                return $result;
                        }
                    };
                    //上传失败
                    data.error = function (response,$form) {
                        var errorFn;
                        try { errorFn = eval(options.errorFn) } catch (err) { };
                        if (errorFn) {
                            errorFn(response.responseText,$this);
                        }
                    };
                    //上传成功
                    data.success = function (response,$form) {
                        //response = eval("(" + response + ")");
                        if (response.MessageType == 1) {
                            methods.showImage(response.Data.RelativePath,$this.parent());
                            $this.parent().find("input:hidden").val(response.Data.RelativePath);

                            var successFn;
                            try { successFn = eval(options.successFn) } catch (err) { };
                            if (successFn) {
                                $.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载
                                successFn(response,$this);
                            }


                        } else {
                            alert(response.MessageContent);
                        }
                        $this.attr("disabled",false);
                        fileBox.html("<input type=\"file\" name=\"file\" />");
                        $form.remove();
                    };

                    try {
                        //开始ajax提交表单
                        $form.ajaxSubmit(data);
                    } catch (e) {
                        alert(e.message);
                    }
                });
            });
        }
    });
})(jQuery)
HTML代码： 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery/jquery-1.8.3.js"></script>
<script src="Scripts/jquery/ajaxForm/jquery.form.js"></script>
<script src="Scripts/jquery/jquery.upload.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; float: left;">
    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />
    <div class="imgdiv"></div>
    <span class="img_span">
        <input type="file" name="file" />
    </span>
    
    <input type="button" value="上传" class="upload" />
</div>
<div style="width: 100%; float: left;">
    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />
    <div class="imgdiv"></div>
    <span class="img_span">
        <input type="file" name="file" />
    </span>
    
    <input type="button" value="上传" class="upload" />
</div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        //$(".upload").upload({
        //    uploadData: { id: "12233" },$this) {
        //        alert(response.Data.RelativePath)
        //    },//    deleteData: { id: function () { return "asdfasdf" } }
        //});
        $(".upload").upload({
            uploadData: { id: "12233" },deleteData: { id: function () { return "asdfasdf" } }
        });
    });

    //上传成功后执行该函数
    function success(response,$this) {
        //比如插入编辑器
        alert(response.Data.RelativePath + $this.attr("value"))
    }
</script>
</body>
</html>

服务器端使用一般处理程序： 
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";
    var action = context.Request.QueryString.Get<string>("action").ToLower();
    var response = new JsonResult(StatusMessageType.Error,"没有权限或无效请求。").ToJson();
    switch (action)
    {

        case "uploadfile":
            if (context.Request.Files.Count > 0)
                response = UploadFile(context.Request);
            break;
        case "deletefile":
            response = DeleteFile(context.Request.Form);
            break;
        default:
            break;
    }
    context.Response.Write(response);
}
/// <summary>
/// 
/// </summary>
/// <param name="file"></param>
/// <returns></returns>
private string UploadFile(HttpRequest request)
{
 if (request.Files.Count == 0)
 return new JsonResult(StatusMessageType.Error,"没有可处理的数据。").ToJson();
 var id = request.Form.Get<string>("id","");

 var file = request.Files[0];
 if (file == null || file.ContentLength <= 0 || string.IsNullOrEmpty(file.FileName))
 return new JsonResult(StatusMessageType.Error,"没有可处理的数据。").ToJson();

 //IStoreFile storeFile = null;

 string[] datePaths = new string[] { "~/uploads/" };
 datePaths = datePaths.Union(DateTime.Now.ToString("yyyy-MM-dd").Split('-')).ToArray();
 var relativePath = storeProvider.JoinDirectory(datePaths);

 var dirPath = HttpContext.Current.Server.MapPath(relativePath);

 if (!System.IO.Directory.Exists(dirPath))
 System.IO.Directory.CreateDirectory(dirPath);

 var fileName = GenerateFileName(Path.GetExtension(file.FileName));

 var filePath = Path.Combine(dirPath,fileName);
 file.SaveAs(filePath);
 return new JsonResult(StatusMessageType.Success,"上传成功。",new
 {
 RelativePath = WebUtility.ResolveUrl(Path.Combine(relativePath,fileName)),Size = file.ContentLength,Id = id,}).ToJson();
}

public string DeleteFile(NameValueCollection form)
{
 var filePath = form.Get<string>("filePath","").Trim();
 if (string.IsNullOrEmpty(filePath))
 return new JsonResult(StatusMessageType.Error,"无效提交。").ToJson();

 try
 {
 if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(filePath)))
 {
 System.IO.File.Delete(HttpContext.Current.Server.MapPath(filePath));
 return new JsonResult(StatusMessageType.Success,"文件删除成功。").ToJson();
 }
 else
 {
 return new JsonResult(StatusMessageType.Success,"找不到该文件。").ToJson();
 }
 }
 catch (Exception)
 {
 return new JsonResult(StatusMessageType.Hint,"发生错误。").ToJson();
 }
}

/// <summary>
/// 生成随机文件名
/// </summary>
/// <returns></returns>
private string GenerateFileName(string extension)
{
 return DateTime.Now.Ticks.ToString() + extension;
}
程序使用的是framework4.0，所以使用了一些扩展方法。
JsonTesult类代码： 
[Serializable]
public class JsonResult
{
    private StatusMessageType _messageType;
    private string _messageContent;


    /// <summary>
    /// 
    /// </summary>
    /// <param name="messageType"></param>
    /// <param name="messageContent"></param>
    /// <param name="data"></param>
    public JsonResult(StatusMessageType messageType,string messageContent,object data = null)
    {
        _messageType = messageType;
        _messageContent = messageContent;
        Data = data;
    }

    public StatusMessageType MessageType
    {
        get { return _messageType; }
        set { _messageType = value; }
    }

    public string MessageContent
    {
        get { return _messageContent; }
        set { _messageContent = value; }
    }

    public object Data { get; set; }

    public string ToJson()
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        var json = serializer.Serialize(this);

        //string p = @"\\/Date\((\d+)\)\\/";
        //MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);
        //Regex reg = new Regex(p);
        //json = reg.Replace(json,matchEvaluator);
        return json;
    }

    private static string ConvertJsonDateToDateString(Match m)
    {
        string result = string.Empty;
        DateTime dt = new DateTime(1970,1,1);
        dt = dt.AddMilliseconds(long.Parse(m.Groups[1].Value));
        dt = dt.ToLocalTime();
        result = dt.ToString("d");
        return result;
    }
}

StatusMessageType枚举类：

/// <summary>
/// 提示消息类别
/// </summary>
public enum StatusMessageType
{
    /// <summary>
    /// 权限不足
    /// </summary>
    NoAccess = -2,/// <summary>
    /// 错误
    /// </summary>
    Error = -1,/// <summary>
    /// 成功
    /// </summary>
    Success = 1,/// <summary>
    /// 提示信息
    /// </summary>
    Hint = 0
}
其他的扩展方法就不一一给出来了。 原文链接：https://www.f2er.com/ajax/164956.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作