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

相关文章

来自专栏优启梦

PHP两个图片合并,并添加文字

4308
来自专栏葡萄城控件技术团队

Asp.Net MVC4入门指南(5):从控制器访问数据模型

在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里。 在开...

1775
来自专栏漫漫全栈路

ASP.NET MVC学习笔记02控制器和路由

上一篇大致说了下ASP.NET MVC到底是什么,以及MVC的思想,下面我们就继续依照官方文档,从MVC的C开始入手,也就是控制器。 ---- MVC的官方解...

2464
来自专栏Wordpress专用主机|主题模板|必备插件

WORDPRESS个性化页面编辑插件推荐:ELEMENTOR

今天小编要推荐的是一款Wordpress个性化页面插件:Elementor。这款插件目前有近80万+的Wordpress用户在使用,广受好评。

5989
来自专栏ytkah

微信公众平台悄悄地更新了自定义菜单功能

  微信公众号可以在会话界面底部设置自定义菜单,您可以按需设定菜单项,并可为其设置响应动作。您可以通过点击菜单项,收到您设定的消息,或者跳转到设定的链接。昨晚微...

3495
来自专栏程序员阿凯

Gradle简介

1105
来自专栏Grace development

微信支付-支付结果通用通知

所有数据通过自己的逻辑保存后需要告诉微信一声,这时候需要再将代码组成xml发送给微信,微信给定了固定格式和字段

772
来自专栏维C果糖

IntelliJ IDEA 中 Project 和 Module 的概念及区别

在 IntelliJ IDEA 中,没有类似于 Eclipse 工作空间(Workspace)的概念,而是提出了Project和Module这两个概念。接下来,...

19610
来自专栏Java成神之路

Idea_学习_09_Idea 方法自动生成参数默认名

生成方法后,还空着参数,可以使用 ctrl + alt + 空格 ,列出参数,然后选择参数即可。

734
来自专栏性能与架构

jquery的ready方法实现原理

应用jquery时 ready是一个非常常用的方法,我们常常会写 $(document).ready(function) 或 $(function) re...

3257

扫码关注云+社区