使用jQuery ajaxupload插件實(shí)現(xiàn)無刷新上傳文件
項(xiàng)目中會(huì)經(jīng)常用到AJAX無刷新上傳圖片,但是iframe上傳和flash插件都是比較復(fù)雜的,所以就找了一個(gè)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 格式的文件!', '系統(tǒng)提示'); 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插件實(shí)現(xiàn)無刷新上傳文件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery+AJAX實(shí)現(xiàn)網(wǎng)頁無刷新上傳
- jQuery的ajax中使用FormData實(shí)現(xiàn)頁面無刷新上傳功能
- Jquery基于Ajax方法自定義無刷新提交表單Form實(shí)例
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- jQuery Ajax文件上傳(php)
- 一個(gè)簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- jquery ajax實(shí)現(xiàn)文件上傳功能實(shí)例代碼
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果
- Jquery+AJAX實(shí)現(xiàn)無刷新上傳并重命名文件操作示例【PHP后臺(tái)接收】
相關(guān)文章
jquery實(shí)現(xiàn)個(gè)人中心導(dǎo)航菜單效果和美觀都非常不錯(cuò)
這是一款由jquery開發(fā)的導(dǎo)航菜單。適合放在門戶網(wǎng)站的個(gè)人用戶中心后臺(tái)。效果和美觀都非常不錯(cuò)2014-09-09jquery實(shí)現(xiàn)簡單的表單驗(yàn)證
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的表單驗(yàn)證,思路大概是先為每一個(gè)required添加必填的標(biāo)記,用each()方法來實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2015-11-11jQuery學(xué)習(xí)筆記之jQuery選擇器的使用
jQuery中最核心和最讓人愛不釋手的就是選擇器,下面就是各種選擇器代筆的意義。2010-12-12Jquery ajax不能解析json對象,報(bào)Invalid JSON錯(cuò)誤的原因和解決方法
我們知道Invalid JSON錯(cuò)誤導(dǎo)致的json對象不能解析,一般都是服務(wù)器返回的json字符串的語法有錯(cuò)誤。這種情況下,我們只需要仔細(xì)的檢查一下json就可以解決問題。2010-03-03JQuery中attr方法和removeAttr方法用法實(shí)例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實(shí)例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jQuery 添加樣式屬性的優(yōu)先級(jí)別方法(推薦)
下面小編就為大家?guī)硪黄猨Query 添加樣式屬性的優(yōu)先級(jí)別方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06