ajax无刷新上传文件，使用iframe模仿--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > ajax无刷新上传文件，使用iframe模仿=

ajax无刷新上传文件，使用iframe模仿

其实ajax是无法上传文件的，所以得用隐藏的iframe来模仿

ajax未出现之前，一直都是隐藏的iframe来实现无刷新操作

如果谁看过图灵程序设计丛书的Ajax高级编程，就知道了。

示例下载点击这里

下面列出代码，asp的上传代码太麻烦，就使用。net了。。。

upload.ashx

-C#

//<%@ WebHandler Language="C#" Class="upload" %>

using System;
using System.Web;

public class upload : IHttpHandler {
    private string Js(string v) {//此函数进行js的转义替换的，防止字符串中输入了'后造成回调输出的js中字符串不闭合
        if (v == null) return "";
        return v.Replace("'", @"\'");
    }
    //下面就是一个简单的示例，保存上传的文件，如果要验证上传的后缀名，得自己写，还有写数据库什么的
    public void ProcessRequest (HttpContext context) {
        HttpRequest Request = context.Request;
        HttpResponse Response = context.Response;
        HttpServerUtility Server = context.Server;
        //指定输出头和编码
        Response.ContentType = "text/html";
        Response.Charset = "utf-8";
        
        HttpPostedFile f = Request.Files["upfile"];//获取上传的文件
        string des = Request.Form["des"]//获取描述
            ,newFileName=Guid.NewGuid().ToString();//使用guid生成新文件名

        if (f.FileName == "")//未上传文件
            Response.Write("<script>parent.UpdateMsg('','');</script>");//输出js，使用parent对象得到父页的引用
        else { //保存文件
            newFileName += System.IO.Path.GetExtension(f.FileName);//注意加上扩展名
            try {
                f.SaveAs(Server.MapPath("~/uploads/" + newFileName));//如果要保存到其他地方，注意修改这里

                //调用父过程更新内容，注意要对des变量进行js转义替换，防止字符串不闭合提示错误
                Response.Write("<script>parent.UpdateMsg('" +Js(des)+ "','" + newFileName + "')</script>");
            }
            catch {
                Response.Write("<script>alert('保存文件失败！\\n请检查文件夹是否有写入权限！');</script>");//如果保存失败，输出js提示保存失败
            }
            
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

test.htm

-HTML

<!!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>使用隐藏的Iframe实现ajax无刷新上传</title>
</head>
<body>
    <script type="text/javascript">
    function UpdateMsg(des,filename){//此函数用来提供给提交到的页面如upload.ashx输出js的回调，更新当前页面的信息
      if(filename==''){alert('未上传文件！');return false;}
      document.getElementById('ajaxMsg').innerHTML='你在表单中输入的“文件描述”为：'+des+'<br/>'
      +'上传的图片为：<a href="uploads/'+filename+'" target="_blank">'+filename+'</a>';
    }
    
    function check(f){
      if(f.des.value==''){
         alert('请输入文件描述！');f.des.focus();return false;
      }
      if(f.upfile.value==''){
        alert('请选择文件！');f.upfile.focus();return false;
      }
    }
    </script> 
    <!--隐藏的iframe来接受表单提交的信息-->
    <iframe name="ajaxifr" style="display:none;"></iframe>
    <!--这里设置target="ajaxifr"，这样表单就提交到iframe里面了，和平时未设置target属性时默认提交到当前页面-->
    <!--注意一点的是使用iframe时在提交到的页面可以直接输出js来操作父页面的信息，一般的ajax提交文本信息时你需要返回信息，如果是js信息你还得eval下-->
    <form method="post" enctype="multipart/form-data" action="upload.ashx" target="ajaxifr" onsubmit="return check(this)">
    文件描述：<input type="text" name="des" /><br >
    选择文件：<input type="file" name="upfile" /><br >
    <input type="submit" value="提交" />
    </form>
    <!--放入此div用来实现上传的结果-->
    <div id="ajaxMsg"></div>
</body>
</html>

类别：JavaScript/Ajax　作者：波波　日期：2009-07-07　【评论：0　阅读：】　

上一篇：美化alert，confirm，prompt并实现lightbox效果　
下一篇：Javascript attachEvent传递参数的办法

暂时没有评论！

发表留言