利用JQuery的ajax请求实现文件上传

今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。

主要需要引入一个js文件,然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机制了。

第一步:引入js文件名称为:ajaxfileupload.js 下载地址:点击打开链接

第二步:编写<input type="file" name="file" id="file"/>点击上传文件。

第三步:编写ajaxFileUpload异步请求,并处理请求结果。

下面给出完整的例子:

<html>
<head>
    <title>利用JQuery的ajax请求实现文件上传</title>
</head>
<body>
    <input type="file" name="file1" id="file1"/>
    <button type="button" id="submitId">点击上传<button>     
<script src="js/jquery.js"></script>    
<script src="js/ajaxfileupload.js"></script>
<script>
    $("#submitId").on("click",function () {
        $.ajaxFileUpload({
            url:'此处填写URL地址', //你处理上传文件的服务端
            secureuri:false,//是否启用安全机制
            fileElementId:'file1',//file的id
            dataType: 'application/json',//返回的类型
            success: function (data) {//调用成功时怎么处理
              alert("上传成功");
            }
        });
    });
</script>
</body>
</html>

这里需要注意的是:jquery的文件要在ajaxFileUpload文件之前引入,否上传不成功。

如果大家想要源代码或者对文章有啥异议都可以加我QQ:208017534  欢迎打扰哦!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

Vue 折腾记 - (14) Nuxt.js 2 正式版升级采坑以及部署姿势改动

整个配置文件分两部分: apps(启动应用的相关信息,环境变量,进程执行模式等) , deploy(部署区域)

1352
来自专栏Python

linux每日命令(19):locate 命令

locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案。其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不...

431
来自专栏landv

robocopy的用法,数据库局域网备份

1975
来自专栏埋名

Git 常用命令清单笔记

这里是我的笔记,记录一些git常用和一些记不住的命令,这个笔记原本是基于 颜海镜的文章增加的,后面慢慢增加了许多内容,可以看出的的学习轨迹。分享出来方便自己查看...

853
来自专栏从零开始学自动化测试

jenkins上展示html报告

前言 在jenkins上展示html的报告,需要添加一个HTML Publisher plugin插件,把生成的html报告放到指定文件夹,这样就能用jenki...

5428
来自专栏用户2442861的专栏

每天一个linux命令(61):wget命令

http://www.cnblogs.com/peida/archive/2013/03/18/2965369.html

542
来自专栏landv

robocopy的用法,数据库局域网备份

1232
来自专栏java一日一条

9 个使用前必须再三小心的 Linux 命令

Linux Shell/terminal 命令非常强大,即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。

461
来自专栏飞雪无情的博客

Android Gradle 入门

Gradle是一款非常优秀的构建系统工具,它的DSL基于Groovy实现,可以让你很方便的通过代码控制这些DSL来达到你构建的目的,其构建的大部分功能都是通过插...

844
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(12)——跳过验证码登录add_cookie

3595

扫码关注云+社区