随笔- 126 文章- 0 评论- 1307 阅读- 28万

无刷新上传图片以及使用C#语言

写这个纯属是给自己一个记忆啦

一.前台的代码以及调用的js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>上传</title>
    <script src="jquery-1.4.1.min.js"></script>
    <script src="ajaxfileupload.js"></script>
</head>
<body>
    <div class="am-u-md-4">     <!-- 文件显示的地方-->
        <img id="imgShow1" alt="" class="am-img-circle am-img-thumbnail" src="../../Tools[NO]pic.png" />
    </div>
    <div class="am-form-group">
        <input id="fileUploadChange" runat="server" name="browse" onchange="ajaxFrontCoverUpload1();" style="width: 50%" type="file" />
        <input id="fileUploadChangeId" runat="server" type="hidden" value="" />   <!--图片上传-->         <!--隐藏一个input存放图片的ID-->
        <p class="am-form-help">此处选择要上传的产品大图...</p>
    </div>
</body>
</html>
<script>
//异步上传大图
        function ajaxFrontCoverUpload1() {

            //检测要上传的是不是图片文件
            var filePath = $("#fileUploadChange").val();
            if (filePath != "") {
                var extName = filePath.substr(filePath.lastIndexOf('.') + 1, filePath.length - filePath.lastIndexOf('.'));
                if (extName != "jpg" && extName != "bmp" && extName != "png" && extName != "jpeg" && extName != "gif") {
                    alert("图片必须是bmp,png,jpeg,jpg,gif格式的文件！");
                    return;
                }
            }
            //上传图片操作
            $.ajaxFileUpload
            (
                {
                    url: '../UploadImageHandler.ashx',
                    secureuri: false, //是否需要安全协议
                    fileElementId: 'fileUploadChange', //上传控件id
                    type: 'POST',
                    dataType: "text",
                    success: function (data) {
                        var code = data.substring(0, 1);
                        if (code == "1") {
                            var filePath = data.substring(3);
                            filePath = filePath.replace("\\", "/");
                            $("#fileUploadChangeId").val(filePath);//将文件路径存放在隐藏域中
                            $("#imgShow1").attr("src", filePath);
                            alert("上传成功！");
                        } else {
                            alert(data);
                        }
                    }
                }
            )
            return false;
        }
    </script>

二.一般处理程序

<%@ WebHandler Language="C#" Class="UploadImageHandler" %>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;

public class UploadImageHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request.Files.Count > 0)
        {
            HttpPostedFile file = context.Request.Files[0];
            if (file.ContentLength > 0)
            {
                string suffix = file.FileName.Substring(file.FileName.LastIndexOf('.'));//后缀
                if (!suffix.ToLower().Contains(".bmp") && !suffix.ToLower().Contains(".png") && !suffix.ToLower().Contains(".jpeg") &&
                    !suffix.ToLower().Contains(".jpg") && !suffix.ToLower().Contains(".gif"))
                {
                    context.Response.Write("图片格式必须以下格式:bmp,png,jpeg,jpg,gif");
                    return;
                }

                try
                {
                    string filePath = (@"~/Image/") + DateTime.Now.ToString("yyyyMMdd") + "/" + DateTime.Now.ToString("HHmmssfff");
                    Directory.CreateDirectory(context.Server.MapPath(filePath));
                    string fileFullName = filePath + "/" + file.FileName;
                    file.SaveAs(context.Server.MapPath(fileFullName));
                    string json = "{\"msg\":\"" + fileFullName + "\",code:\"10000\"}";
                    context.Response.Write("1_" + fileFullName);
                    return;
                }
                catch (Exception ex)
                {
                    context.Response.Write(HttpUtility.HtmlEncode(ex.Message));
                    return;
                }
            }
            context.Response.Write("请选择要上传的文件!");
            return;
        }
        context.Response.Write("请选择要上传的文件!");
        return;
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}