利用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 条评论
登录 后参与评论

相关文章

来自专栏用户画像

MAC Elasticsearch 新建索引

官网API:https://www.elastic.co/guide/cn/elasticsearch/guide/current/_creating_an_i...

8120
来自专栏一个爱瞎折腾的程序猿

使用node自动生成html并调用cmd命令提交代码到仓库

然后就可以愉快的抓数据了。之前也写过基于request,iconv,cheerio,schedule(定时调度模块)写了一个抓取的框架

26520
来自专栏散尽浮华

Linux下FTP环境部署梳理(vsftpd和proftpd)

在日常运维工作中,常部署到的FTP是vsftpd和proftd。之前写了Linux下FTP虚拟账号环境部署总结,下面简单说下本地用户下的FTP环境部署过程: 简...

56870
来自专栏Java成神之路

SpringMVC异常_01_约束_<mvc:annotation-driven />报错

异常信息:xsd not found:cvc-complex-type.2.4.c: The matching wildcard is strict, but ...

11460
来自专栏我的博客

关于蜘蛛爬取网站

最近一个网站总是流量超出预期,后来检查了一下日志发现一个奇怪的现象~ image.png 这个都是蜘蛛来爬的记录~ 这个是列表页,而且url组装的时候有点问题。...

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

selenium+python自动化90-多线程生成报告(BeautifulReport)

前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生产一个测试报告这个是难点,刚好在github上有个大神分享了BeautifulReport,完...

59050
来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

375130
来自专栏PHP在线

memcache安装方法

一个朋友的服务器换成了64位系统,增加了内存。 让我给装一下memcached,好吧! 经过一翻努力,安装成功,记录一下。 一、安装memcache的...

32450
来自专栏北京马哥教育

HTTP 协议漫谈

简介 网络上已经有不少介绍 HTTP 的好文章,对HTTP的一些细节介绍的比较好,所以本篇文章不会对 HTTP 的细节进行深究,而是从够高和更结构化的角度将 H...

316110
来自专栏博客园迁移

jenkins自动部署应用到tomcat中,编译后shell脚本的简单示例

1.先配置好jenkins需要用到的其他外部组件  jdk,maven,git/svn

25030

扫码关注云+社区

领取腾讯云代金券