ajax+ashx上传图片

来源：互联网发布：启动搜狗输入法 linux 编辑：程序博客网时间：2024/04/29 17:55

HTML

<div>            <a  class="file">上传图片                <input type="file"  id="btnfile" name="btnfile">            </a>        </div>

CSS

.file {    position: relative;    display: inline-block;    background: #D0EEFF;    border: 1px solid #99D3F5;    border-radius: 4px;    padding: 4px 12px;    overflow: hidden;    color: #1E88C7;    text-decoration: none;    text-indent: 0;    line-height: 20px;}.file input {    position: absolute;    font-size: 100px;    right: 0;    top: 0;    opacity: 0;}.file:hover {    background: #AADFFD;    border-color: #78C3F3;    color: #004974;    text-decoration: none;}

$(".file").on("change", "input[type='file']", function () {                    var conID = $("#chat_insert_box>textarea");                     if ($.trim(conID.val()).split('[img]').length > 1) {                        layer.msg("只能包含一张图片，回复失败！");                        return;                        }                   var strData = new FormData();                   $.each($('#btnfile')[0].files, function (i, file) {                       if ("image/png" == file.type || "image/jpeg" == file.type) {                           if (10485760 < file.size) {                               layer.msg("图片上传失败！不能大于10M");                               return;                           }                           strData.append("upfile", file);                           var index = layer.msg("上传中...", { icon: 16, time: false, shade: [0] })                           var strUrl;                           strUrl = "handler/JqDataHandle.ashx?mode=insertImg";                           $.ajax({                               type: "POST",                               url: strUrl,                               data: strData,                               processData: false,                               contentType: false,                               async: false,                               success: function (data) {                                   layer.close(index);                                   if (data.substring(0, 5) == "Error") {                                       layer.msg(data.substring(6, data.length));                                       return;                                   }                                   data = data.split(',');                                   $("#chat_insert_box>textarea").val(function (n, c) {                                    if($.trim(c)==""){                                        return c + '[img]' + data[1] + '[/img]';                                    } else { return c + '\n' + '[img]' + data[1]+ '[/img]'; }                                })                               },                               error: function (err) {                                   layer.close(index);                                   layer.msg("抱歉发生错误！请检查网络状况");                                   return;                               }                           })                       } else {                           layer.msg("请选择正确的文件格式！jpg或png");                           return;                       }                   });            });

ashx

 public void insertImg (HttpContext context) {        context.Response.ContentType = "text/plain";        string result = string.Empty;        string filePath = string.Empty;        string fileNewName = string.Empty;        try {            HttpFileCollection files = context.Request.Files;            if (files.Count > 0)            {                fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);                try { files[0].SaveAs(context.Server.MapPath("~/saveImg/"+fileNewName)); }                catch {                    context.Response.Write("Error:"+filePath.ToString());                    context.Response.End();                    return;                }                result = "OK," + fileNewName + "";            }            else            {                result = "Error:错误代码：02，上传失败！";            }        }        catch        {                result = "Error:错误代码：03，上传失败！";        }        context.Response.Write(result);        context.Response.End();    }

1 0