//resultList->['file1','file2']为上传成功的filename

varuploadCallback=function(resultList){

console.log(JSON.stringify(resultList));

vari=0;

for(;i<resultList.length;i++){

varindex=resultList[i].substr('file'.length);

$(':checkbox[value='+index+']').parent().parent().remove();

}

};

$(function(){

//保存图片旋转的角度，以便提交给服务端处理

varrotateAng={};

//用于命名后缀的序号

varcc=0;

//如果是chrome/ff，需要用fileapi去生成img

vargenImgTpl=function(input,index){

return'<imgsrc="/webx/public/1.png"class="main"id="img'+index+'"/>';

};

varreadImgFromInput=function(_input,index){

varinputDom=_input[0];

//chrome/ff

if(inputDom['files']){

varreader=newFileReader();

reader.onload=function(e){

$('img.main:last').attr({src:e.target.result});

}

reader.readAsDataURL(inputDom['files'][0]);

}else{

varsrc=_input[0].value;

varimgDom=$('#img'+index);

imgDom.attr('src-old',src);

imgDom.css({

float:'left',

position:'relative',

overflow:'hidden',

width:'195px',

height:'195px'

});

imgDom.css({'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+src+"\")"});

}

};

varshowImg=function(_input){

varindex=++cc;

_input.addClass('hide');

_input.attr('name','file'+index);

_input.attr('data-index',index);

variframeWin=$('#choose')[0].contentWindow;

iframeWin.addInput(_input);

vartpl='<div>'+genImgTpl(_input,index)+

'<spanclass="choose"><inputtype="checkbox"value="'+index+'"checked="true"/></span>'+

'<spanclass="optsturn-right"><imgsrc="img/rightBtn.png"/></span>'+

'</div>';

$('#imgDiv').append(tpl);

readImgFromInput(_input,index);

};

varaddAnother=function(){

$('#uploadBtn').before('<inputtype="file"name="file"/>');

};

//input[type=file]的绑定事件

$('#uploadDivinput').live('change',function(){

varpath=this.value;

if(!path){

return;

}

showImg($(this));

addAnother();

});

//可以在checkbox时候removeinput

//$('#imgDivinput:checkbox').live('change',function(){

//varisChecked=$(this).is(':checked');

//console.log(isChecked);

//});

$('#imgDivspan.turn-right').live('click',function(){

//上次旋转的角度

varindex=$(this).siblings('span.choose').find('input').val();

varoldAng=rotateAng[index]||0;

varnewAng=oldAng+90;

rotateAng[index]=newAng;

$('#img'+index).rotate(90);

});

//表单提交时候根据checkbox，删除未choose的input[type=file]

$('#uploadBtn').click(function(){

varchoosedNum=$('#imgDivinput:checkbox').filter(':checked').length;

if(!choosedNum){

alert('请选择上传文件！');

returnfalse;

}

//选中的序号数组

varchoosedIndexList=$('#imgDivinput:checkbox').filter(':checked').map(function(){

returnthis.value;

}).get();

//两个iframe，一个用于保存选择的input[type=file]

//一个用于formupload

varuploadIframe=$('#upload')[0].contentWindow;

varchooseIframe=$('#choose')[0].contentWindow;

vari=0;

for(;i<choosedIndexList.length;i++){

varindex=choosedIndexList[i];

varinputFile=chooseIframe.$('#uploadDivinput').filter('[data-index='+index+']');

uploadIframe.$('#uploadForm').append(inputFile);

//旋转度数

varang=rotateAng[index]||0;

if(ang%360!=0){

vartplInput='<inputtype="hide"name="ang'+index+'"value="'+ang+'"/>';

uploadIframe.$('#uploadForm').append(tplInput);

}

}

uploadIframe.doUpload();

returnfalse;

});

});

下一篇：JavaScript实现限时秒杀功能