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


Posted in jQuery onApril 23, 2017

项目中会经常用到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>

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

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
You might like
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python入门篇之正则表达式
2014/10/20 Python
python计算两个地址之间的距离方法
2018/06/09 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
序列化Python对象的方法
2020/08/01 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
python pillow库的基础使用教程
2021/01/13 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
劳资员岗位职责
2013/11/11 职场文书
后勤主管岗位职责
2014/03/01 职场文书
电钳工人个人求职信
2014/05/10 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
画展观后感
2015/06/17 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL