专栏首页强仔仔利用JQuery的ajax请求实现文件上传

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

相关文章

  • log.error()底层到底做了些啥?

    今天给大家介绍一下logback日志,底层是如何实现的。这边我们打印一下error级别的日志,看看从log.error到输出磁盘,这个过程中到底发生了些什么,并...

    林老师带你学编程
  • vscode下面开发vue.js项目

    1.首先用官方vue-cli脚手架创建一个vue的集成环境(不会的请阅读上一章节),目录如下:

    林老师带你学编程
  • 基于web的IT技术论坛

    一.基于web的IT技术论坛设计目的及任务 利用当下流行的SSM(Spring,SpringMVC,Mybatis)框架,并运用maven进行项目管理,实现基...

    林老师带你学编程
  • Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

    浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

    笔阁
  • 策略模式 Krains 2020-12-12

    在设计模板时审批人一般是固定的,但是也可设计成一种审批类型,比如审批人设置为申请人的leader,或者申请所属项目的维护人员,这时候我们需要根据不同的审批类型设...

    Krains
  • SAP云平台webIDE UI5应用的Application Status菜单实现细节

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 一文读懂Linux

    为了便于理解,本文从常用操作和概念开始讲起。虽然已经尽量做到简化,但是涉及到的内容还是有点多。在面试中,Linux 知识点相对于网络和操作系统等知识点而言不是那...

    奈何缘浅wyj
  • 选中分享

    河湾欢儿
  • 小朋友学Python(17):文件

    Python 提供了必要的函数和方法进行默认情况下的文件基本操作。你可以用 file 对象做大部分的文件操作。 一、打开和关闭文件 例1 (1)创建名为test...

    海天一树
  • Linux用户和权限管理看了你就会用啦

    没想到上一篇能在知乎获得千赞呀,Linux也快期末考试了,也有半个月没有写文章了。这篇主要将Linux下的用户和权限知识点再整理一下。

    Java3y

扫码关注云+社区

领取腾讯云代金券