使用jQuery ajaxupload插件实现无刷新上传文件
程序员文章站
2023-08-21 10:12:34
项目中会经常用到ajax无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。
代码如下
使用方法如下
<...
项目中会经常用到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插件实现无刷新上传文件,希望对大家有所帮助
上一篇: 爆寒的冻人冷段儿,要降温了
下一篇: 高中时候的爆笑
推荐阅读
-
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
-
jquery使用FormData实现异步上传文件
-
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
-
使用PHP和HTML5 FormData实现无刷新文件上传教程
-
jQuery文件上传插件Uploadify使用指南
-
详解jQuery uploadify文件上传插件的使用方法
-
jquery使用FormData实现异步上传文件
-
C#使用WebService结合jQuery实现无刷新翻页的方法
-
使用jQuery ajaxupload插件实现无刷新上传文件
-
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法