1、使用插件plupload

2、實現(xiàn)效果

?

3、HTML

1 <li> 2 <div class="default" data-disabled="false"><img src="" class="upImage"></div> 3 <input id="fileStorge2" value="" type="hidden" class="fileStorge"> 4 <input type="file" name="" value="" style="display: none;" class="fileUp" id="fileUp2" data-id="2"> 5 </li>

?

?4、JS

//點擊上傳圖片 $('body').off('click','.default'); $('body').on('click','.default', function () {var disabled = $(this).attr('data-disabled');if (disabled === "true") {return false;}else{$(this).siblings('.fileUp').trigger('click');}});//圖片上傳初始化函數(shù) function initImage(){$('.fileUp').each(function(index,ele){var id = $(this).attr('id'),indexNum = $(this).attr('data-id');initUpload(id, indexNum);});}//圖片上傳 function initUpload(eleID, index) {var uploader = new plupload.Uploader({ //實例化一個plupload上傳對象 browse_button : document.getElementById(eleID),url : 'upload.html', //服務器端的上傳頁面地址flash_swf_url : 'Moxie.swf',silverlight_xap_url : 'Moxie.xap',multi_selection: false,//是否可以在文件瀏覽對話框中選擇多個文件 filters: {mime_types : [ //只允許上傳圖片文件{ title : "圖片文件", extensions : "jpg,gif,png" }]}});uploader.init(); //初始化//綁定文件添加進隊列事件uploader.bind('FilesAdded',function(uploader,files){for(var i = 0, len = files.length; i<len; i++){!function(i){previewImage(files[i],function(imgsrc){$('#'+eleID+'').siblings('.default').find('img').attr('src',imgsrc).show();$('#fileStorge'+index).val(encodeURIComponent(imgsrc));});}(i);}});}//圖片上傳預覽 function previewImage(file,callback){ if(file.type=='image/gif'){ //gif使用FileReader進行預覽,因為mOxie.Image只支持jpg和pngvar fr = new mOxie.FileReader();fr.onload = function(){callback(fr.result);}fr.readAsDataURL(file.getSource());}else{var preloader = new mOxie.Image();preloader.onload = function() {preloader.downsize( 300, 300 );//先壓縮一下要預覽的圖片,寬300，高300var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到圖片src,實質為一個base64編碼的數(shù)據callback && callback(imgsrc); //callback傳入的參數(shù)為預覽圖片的url };preloader.load( file.getSource() );} }

?

轉載于:https://www.cnblogs.com/zhanghuiyun/p/6709596.html

總結

以上是生活随笔為你收集整理的图片异步上传，使用ajax上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。