1、使用插件plupload
2、实现效果
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');}});//图片上传初始化函数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编码的数据callback && callback(imgsrc); //callback传入的参数为预览图片的url };preloader.load( file.getSource() );} }
