HTML5移動端圖片上傳模塊

上傳圖片的功能是極為常用的，之前做過一個移動端上傳文件的功能（基於jquery的），總結梳理一下。

html

<div class="uploadPic clearBox">
    <ul>
        <li>
            <a href="javascript:void(0)" class="add001"><i class="iconfont">&#xe607;</i></a>
            <div class="moxie-shim moxie-shim-html5 upImgBox">
                <a href="javascript:void(0)" class="del002 iconfont delImg" style="display:none"><span>&#xe605;</span></a>
                <input id="fileUpload0" type="file" accept="image/png,image/gif,image/jpeg,image/bmp">
            </div>
        </li>
    </ul>
<div>

js

$('#fileUpload0').change(function() {
    uploadImg(this);
});
function uploadImg(element){
    var file = element.files[0];
    var $elemt=$(element);
    var $parent = $elemt.parent();
    var imgFileSize = file.size;
    var loadingImgSrc='/images/global/loading.gif';
    if(imgFileSize > 10*1024*1024) {
        alert(ci18n.imgTooLarge);
    } else {
    var uploadComplete=function(evt){
        var resJson=JSON.parse(evt.target.responseText);
        if(resJson.fileurl){
            $parent.find('img').attr('src',resJson.fileurl);
            uploadImgUrls['a'+$elemt.parent().parent().index()]=resJson.fileurl;
            $parent.find('.delImg').show();
            $parent.parent('li').next().show();
        }
    };
    var uploadFailed=function(evt){
        alert('Net error.');
    };
    var fd = new FormData();
    fd.append('upfile',file);
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', uploadComplete, false);
    xhr.addEventListener('error', uploadFailed, false);
    xhr.open('POST', '/activity/group-upload');
    $parent.append('<img src="'+loadingImgSrc+'">');
    xhr.send(fd);
    }
    element.value = '';
}
$('.delImg').click(function() {
    var $self=$(this);
    var $parent = $self.parent();
    delete uploadImgUrls['a'+$self.parent().parent().index()];
    $parent.find('img').remove('');
    $self.hide();
    $parent.parent('li').next().hide();
});

效果：

點擊“+”后會拉起選圖片控件，選擇之后會顯示loading狀態，上傳成功之后，獲取到圖片地址之后，框內會顯示上傳的圖片。

主要用了FromData來實現圖片上傳,並對於圖片大小做了校驗。