• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 使用jQuery ajaxupload插件实现无刷新上传文件

使用jQuery ajaxupload插件实现无刷新上传文件

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了jquery ajaxupload,ajaxupload,ajaxupload.js,ajaxupload.js官网,ajaxupload.js下载等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。

代码如下

使用方法如下

<script type="text/javascript">
$(function () {
var button = $('#upload');
new AjaxUpload(button, {
action: '/upload/imagesAjaxUpload',
name: 'upload',
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
return false;
}
// change button text, when user selects file
button.text('上传中');
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function () {
var text = button.text();
if (text.length < 10) {
button.text(text + '...');
} else {
button.text('上传中');
}
}, 200);
},
onComplete: function (file, response) {
window.clearInterval(interval);
// enable upload button
this.enable();
var json = eval('(' + response + ')');
button.text('选择文件');
$(".qr").css("display","inline");
$(".qr>img").attr("src",json.file_name);
$("input[name='wechat_qr']").val('/uploads/qr/'+json.file_name);
//alert(json.file_name);
//$("#ajaximg").html("<img src='/uploads/qr/"+json.file_name+"' />");
//$("#wechat_qr").val('/uploads/qr/'+json.file_name);
}
});
});
</script>
</div>

以上所述是小编给大家介绍的使用jQuery ajaxupload插件实现无刷新上传文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 使用jQuery ajaxupload插件实现无刷新上传文件

相关文章

  • 2017-05-11vue构建单页面应用实战
  • 2017-05-11Bootstrap入门教程一Hello Bootstrap初识
  • 2017-05-11微信小程序 开发之顶部导航栏实例代码
  • 2017-05-11浅谈jQuery中的$.extend方法来扩展JSON对象
  • 2017-05-11xmlplus组件设计系列之分隔框(DividedBox)(8)
  • 2017-05-11JavaScript实现向select下拉框中添加和删除元素的方法
  • 2017-05-11javascript判断回文数详解及实现代码
  • 2017-05-11JavaScript实现二分查找实例代码
  • 2017-05-11vue省市区三联动下拉选择组件的实现
  • 2017-05-11JavaScript结合HTML DOM实现联动菜单

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Bootstrap下拉菜单Dropdowns的实现代码
    • JavaScript实现垂直滚动条效果
    • jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
    • vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
    • js验证手机号、密码、短信验证码代码工具类
    • js Canvas绘制圆形时钟效果
    • JavaScript中的子窗口与父窗口的互相调用问题
    • JS实现复选框的全选和批量删除功能
    • 微信小程序 引用其他js文件实现代码
    • js模拟支付宝密码输入框

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有