选择文件后自动上传并返回服务区保存文件名称

  功能:选择图片后就自动上传图片文件,并获取返回上传图片在服务器保存的文件名称

 

  源代码如下

test.html

<iframe name="hiddenifr" style="display:none"></iframe>
<script>
    var uploading = false;
    function fileChange(f) { //事件处理函数
        //注意你的动态页一定要有try..cacth语句防止动态页出错,要不发生一次错误后候选的选择无法处理
        //因为必须要执行callback回调才能设置uploading为false,出错了没有执行callback回调,uploading会一直为true导致后续无法操作
        if (uploading) { alert('上一次上传还未完毕!'); return false; }
        if (/\.(jpg|png|bmp|gif)$/i.test(f.value)) { //判断选择的是否为图片文件
            uploading = true;//设置正在上传标志,只允许上一次上传完毕后才能选择新文件进行上传
            f.form.submit();
        }
        else alert('请选择图片文件!');
    }
    function callback(o) { //上传完毕后的回调函数,提供给iframe调用,参数为JSON对象
        uploading = false; //设置上传为完毕状态
        if (o.success) {
            alert('服务器保存图片文件名:' + o.fn);
            document.getElementById('img').src = o.fn;
        }
        else alert(o.err);
    }
</script>
<form method="post" action="upload.ashx" target="hiddenifr" enctype="multipart/form-data">
选择图片文件自动上传:<input type="file" name="file" onchange="fileChange(this)"/><br /><img id="img" alt="预览" />
</form>

upload.ashx

<%@ WebHandler Language="C#" Class="upload" %>
using System;
using System.Web;
public class upload : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        string r = "";
        try
        {
            HttpPostedFile f = context.Request.Files["file"];
            if (f != null && f.FileName != "")
            {
                string fn = DateTime.Now.ToString("yyyyMMddHHmmssfff") + System.IO.Path.GetExtension(f.FileName);
                f.SaveAs(context.Server.MapPath(fn));
                r = "{success:true,fn:'" + fn + "'}";
            }
            else r = "{success:false,err:'没有上传文件!'}";
        }
        catch { r = "{success:false,err:'动态页发生错误,请看事件管理器日志了解详细!'}"; }
        context.Response.Write("<script charset='gb2312'>parent.callback(" + r + ")</script>");
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:选择文件后自动上传并返回服务区保存文件名称

评论(0)Web开发网
阅读(398)喜欢(0)JavaScript/Ajax开发技巧