使用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 EasyUI $.Parser
Jun 02 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery treeview树形结构应用
Mar 24 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
PHP新手上路(七)
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python批量生成本地ip地址的方法
2015/03/23 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python for i in range ()用法详解
2020/09/18 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
一月红领巾广播稿
2014/02/11 职场文书
大学生励志演讲稿
2014/04/25 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
优秀护士事迹材料
2014/12/25 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
干部考核工作总结2015
2015/07/24 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python