• 技术文章 >web前端 >js教程

    Ajax异步上传文件实列(附代码)

    php中世界最好的语言php中世界最好的语言2018-04-04 13:49:46原创623
    这次给大家带来Ajax异步上传文件实列(附代码),Ajax异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下。

    非常不多说,直接给大家上干货,写的不好还请见谅。

    具体代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <title>Index</title>
    <script>
    $(function() {
    $(':button').click(function () {
    var formData = new FormData();
    var file = $("input[type='file']")[0].files[0];
    formData.append("files", file);
    $.ajax({
    url: '/Upload/Upload', //server script to process data
    type: 'POST',
    //Ajax事件
    //beforeSend: beforeSendHandler,
    //success: completeHandler,
    //error: errorHandler,
    // Form数据
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
    });
    });
    });
    </script>
    </head>
    <body>
    <form enctype="multipart/form-data">
    <input name="file" type="file" multiple="multiple" />
    <input type="button" value="Upload" />
    <input type="text" name="userName" value="ice" />
    </form>
    </body>
    </html>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    jQuery+ajax怎么实现json数据的遍历

    Ajax实现考试倒计时并自动提交试卷功能

    以上就是Ajax异步上传文件实列(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Ajax 代码 文件
    上一篇:android与js的交互之jsbridge使用 下一篇:ajax访问到Session失效如何处理
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 聊聊webpack中怎么压缩打包html资源• webpack核心概念之输出(Output)• webpack核心概念之入口配置(entry)• JavaScript和ECMAScript之间的关系• 聊聊如何使用package.json对依赖包进行版本管理
    1/1

    PHP中文网