前台：

<script src="/admin/JS/jquery.blockUI.js" type="text/javascript"></script>
    <script src="/layer/layer.js" type="text/javascript"></script>

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:solid 1px #9bc4e9; width:360px"  id="upimg">
        <tr>
            <td align='center' style='width:100px; border:solid 1px #9bc4e9'>图片：</td>
            <td style='border:solid 1px #9bc4e9; height:35px' align='center'>
            <input id="fileToUpload" type="file" name="fileToUpload">  
            <input id="Hidden1" type="hidden" />
            <img id="loading" src="/admin/JS/Wait/8-1.gif" style="display:none" />
            </td>
        </tr>
        </table>

JS：

$(function(){
    $("#upimg").hide();
    $('.setImg').click(function(){
        $.layer({
            v_dom:'#upimg',
            v_btns:"2",
            v_box:"1",
            v_title:"上传图片",
            v_btn:['上传',"关闭"],
            v_area:['400px','130px'],
            yes:function(){
                load();
                $.ajaxFileUpload({
                url: '/admin/ashx/Article.ashx',
                secureuri: false,
                fileElementId: 'fileToUpload',
                dataType: 'json',
                data:{id:$("#Hidden1").val()},
                success: function(data,status) {
                    if(data.msg=="")
                        $.blockUI({message:"上传成功",timeout: 2000 });
                    if (data.msg!="") 
                        $.blockUI({message:"上传失败",timeout: 2000 });
                },
                error: function(data, status, e) {
                    $.blockUI({message:e,timeout: 2000 });
                }
                })
                return false;
            }
        })
    });
    
})

function load()
{
        $("#loading")
		.ajaxStart(function(){
			$(this).show();
			$("#fileToUpload").hide();
		})
		.ajaxComplete(function(){
			$(this).hide();
			$("#fileToUpload").show();
			layer_close();
		});
}

ashx：

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

using System;
using System.Web;
using Web.Dal;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;
using System.Net;
using System.Text;

public class Article : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        try
        {
            HttpPostedFile file = context.Request.Files["fileToUpload"];
            int id = Convert.ToInt32(context.Request.Form["id"]);
            string path = string.Format("File/NewsImg/{0}-{1}/", DateTime.Now.Year, DateTime.Now.Month);
            if (!Directory.Exists(context.Server.MapPath("~/" + path)))
                Directory.CreateDirectory(context.Server.MapPath("~/" + path));

            string fileName = Path.GetFileName(file.FileName);
            string ext = fileName.Substring(fileName.LastIndexOf('.'));
            path = path + DateTime.Now.Ticks.ToString() + ext;
            //map.Save(savePath);   
            file.SaveAs(context.Server.MapPath("~/File/1" + ext));
            PageBase.MakeThumbImage(context.Server.MapPath("~/File/1" + ext), context.Server.MapPath("~/" + path), 277, 194, "HW");
            //上传成功后显示IMG文件   
            int count = new ArticleServer().EditImg(id, path);
            string result = string.Empty;
            if (count > 0)
                result = "{msg:''}";
            else
                result = "{msg:'上传失败'}";
            context.Response.Write(result);
            context.Response.End();
        }
        catch (Exception ex)
        {
            context.Response.Write(string.Format("{msg:'{0}'}", ex.Message));
            context.Response.End();
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

• 本文标题： layer弹出窗口之异地上传图片
• 文章分类：【JQuery/JavaScript】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：让标签的title属性支持html格式显示
• 下一篇： 没有为扩展名“.htm”注册的生成提供程序。可以在 machine.config 或 web.config 中的 节注册