最简单Ajax文件异步上传

1. 认识FormData对象

FormData是Html5新加进来的一个类,可以模拟表单数据

构造函数解释
FormData (optional HTMLFormElement form)(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

void append(DOMString name, DOMString value)

  • name 表单元素名称
  • value 表单元素要传递的值

<form name="myForm"  enctype="multipart/form-data">
    <input type="text" name="userName">
    <input type="file" name="img">
    <input type="button" id="btn" value="submit">
</form>

2. 使用javascript简单实现

function upload() {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];
    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);

    var request = new XMLHttpRequest();
    request.open('POST', 'submitform.php');
    request.send(fm);
}

3. 使用Ajax实现

$('#btn').click(function () {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];

    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);
    $.ajax(
        {
            url: 'submitform.php',
            type: 'POST',
            data: fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            //禁止的原因是,FormData已经帮我们做了处理
            success: function (result) {
                //测试是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. ajaxfileupload.js插件实现Ajax文件上传

function upload(){
$.ajaxFileUpload({
        url: &#39;a.php&#39;, //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: &#39;file&#39;, //文件上传空间的id属性  
        dataType: &#39;HTML&#39;, //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数
        {                
            $(&quot;#img1&quot;).attr(&quot;src&quot;, data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
            alert(e);
        }
    }   
);
} 

  • 对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值
ASP AJAX 文件上传可以使用以下步骤: 1. 在 ASP.NET Web 应用程序中添加 Microsoft Ajax Library。 2. 在页面上添加一个 FileUpload 控件和一个 ASP.NET Button 控件。 3. 在 Button 的 Click 事件中,编写 ASP.NET 代码以处理文件上传。 4. 使用 Ajax 异步 Post 方式将文件上传到服务器。 下面是一个简单的示例代码: HTML 页面: ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ASP AJAX 文件上传示例</title> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftAjaxWebForms.js" type="text/javascript"></script> <script src="/Scripts/jquery-1.12.4.min.js" type="text/javascript"></script> <script type="text/javascript"> function uploadFile() { var file = $("#fileUpload").get(0).files[0]; var fd = new FormData(); fd.append("file", file); $.ajax({ url: "UploadHandler.ashx", type: "POST", data: fd, processData: false, contentType: false, success: function (response) { alert(response); }, error: function (xhr, status, error) { alert(error); } }); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="file" id="fileUpload" /> <br /> <asp:Button ID="btnUpload" runat="server" Text="上传" OnClientClick="uploadFile(); return false;" /> </div> </form> </body> </html> ``` ASP.NET 代码: ```csharp using System; using System.IO; using System.Web; public partial class UploadHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { HttpPostedFile file = context.Request.Files["file"]; string fileName = context.Server.MapPath("~/Uploads/" + Path.GetFileName(file.FileName)); file.SaveAs(fileName); context.Response.Write("上传成功!"); } public bool IsReusable { get { return false; } } } ``` 在这个示例中,我们使用了 jQuery 库来简化 Ajax 调用。在 uploadFile 函数中,我们获取文件上传控件的值,并将文件数据添加到 FormData 对象中。然后使用 Ajax 异步 Post 方式将文件上传到服务器的 UploadHandler.ashx 处理程序。在处理程序中,我们从请求中获取文件并将其保存到服务器的 Uploads 文件夹中。最后,我们向客户端发送一个响应,表示文件上传成功。 注意:这个示例只是演示了如何使用 ASP.NET 和 Ajax 实现文件上传,实际应用中需要进行更多的安全性检查和错误处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值