您好,登錄后才能下訂單哦!
項目中會經常用到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插件實現無刷新上傳文件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。