使用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的$.event.fix函数统一浏览器event事件处理
做WEB前端开发的人都知道不同的浏览器对事件的处理方式是有区别的。2009-12-12jquery checkbox无法用attr()二次勾选问题的解决方法
下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07jquery (show,fadeOut,Animate)简单效果
jquery (show,fadeOut,Animate)简单效果,需要的朋友可以参考下。2009-11-11
最新评论