使用jQuery ajaxupload插件实现无刷新上传文件
更新时间:2017年04月23日 13:57:56 投稿:mrr
项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能,需要的朋友参考下吧
项目中会经常用到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+AJAX实现网页无刷新上传
- jQuery的ajax中使用FormData实现页面无刷新上传功能
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- jQuery Ajax 上传文件处理方式介绍(推荐)
- jQuery Ajax文件上传(php)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- jquery ajax实现文件上传功能实例代码
- 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
- jquery插件ajaxupload实现文件上传操作
- PHP+jQuery+Ajax实现多图片上传效果
- Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
相关文章
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
我们知道Invalid JSON错误导致的json对象不能解析,一般都是服务器返回的json字符串的语法有错误。这种情况下,我们只需要仔细的检查一下json就可以解决问题。2010-03-03JQuery中attr方法和removeAttr方法用法实例
这篇文章主要介绍了JQuery中attr方法和removeAttr方法用法,实例分析了jQuery中attr方法设置属性与removeAttr方法移除属性的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
最新评论