HTML5、formData移动浏览器上传图片

　该上传方法对于不支持html5的浏览器无法使用。主要针对移动浏览器。

1、html

<div class="upload_img">
    <div  class="file">
        <span class="plus">+</span>
        <span class="text">请拍照上传</span>
        <input  class="fileupload" type="file" name="fangchanzheng1" accept="image/*" capture="camera" />
    </div>
    <p class="info"> 房产证照片 </p>
</div>

• type 是file 加上capture=”camera” 可以在移动端打开摄像头。

2、CSS

修改上传文件按钮的css

.info {
    text-align: center;
    height: 36px;
    line-height: 36px;
    color: #666666;
    font-size: 12px;
}
.file .plus {
    display: inline-block;
    width: 100%;
    font-size: 86px;
    text-align: center;
    line-height: 67px;

}
.file .text {
    position: absolute;
    display: block;
    bottom: 12px;
    width: 100%;
    text-align: center; 
    height: 20px;
    line-height: 20px;
}
.file {
    position: relative;
    display: inline-block;
    background: #F3F3F3;
    border:1px solid #DCDCDC;
    color: #999999;
    border-radius: 0;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 12px;
    letter-spacing: normal;
    width: 100%;
    height: 96px;
    overflow: hidden;
    text-align: center;
    line-height: 96px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 96px;
}

3、图片预览

• 图片预览使用了插件 https://github.com/blueimp/JavaScript-Load-Image
• 代码如下，给上传按钮绑定change事件，change后调用thumbnail方法，在方法内部，当图片加载完成后，创建图片dom等操作，展示预览的图片。由于要替换图片所以给上传文件的按钮设置一个属性zidingyiname,所以在替换图片的时候，通过该属性就可以区分这个按钮要替换图片，遍历filesList把重复了的zidingyiname的file给删除。
• 在这个方法的最后，把file对象push进filesList中，姑且认为这个是要上传的图片的数组。

var filesList = [];
var thumbnail = function (e) {
        var $house_imgs = $(".house-img-upload").eq(0);
        var $IDcard_imgs = $(".IDcard-img-upload").eq(0);
        var This = $(this);
        loadImage(
            e.target.files[0],
            function (img) {
                var $width = $(".file").eq(0).width();
                var $heigth = '96'; 
                // 设置图片显示的方法，这个方法应该拿出来，太忙了，没时间。
                if ($width/$heigth > $(img).attr('width')/$(img).attr('height')) {
                    var ratio = $heigth/$(img).attr('height');
                    $(img).css({
                        width: ratio*$(img).attr('width')+'px',
                        height: $heigth+'px'
                    });
                } else if($width/$heigth < $(img).attr('width')/$(img).attr('height')){
                    var ratio = $width/$(img).attr('width');
                    $(img).css({
                        width: $width+'px',
                        height: ratio*$(img).attr('height')+'px'
                    })
                }else {
                    var ratio = $width/$(img).attr('width');
                    $(img).css({
                        width: $width+'px',
                        height: ratio*$(img).attr('height')+'px'
                    })
                }
                                                                                                　　　　This.parent().find('.plus').remove().end().find('.text').remove().end().find('img').remove();
                This.before($(img));
                This.parent().parent().next().css('display','inline-block');
            }
        );
        e.target.files[0].zidingyiname = This.attr('name');
        for (var i=0,l=filesList.length;i<l;i++) {
            if (This.attr('name') == filesList[i].zidingyiname) {
                filesList.splice(i,1)
                break;
            }
        }
        filesList.push(e.target.files[0]);
    }

    $('.fileupload').bind('change',thumbnail);

4、图片上传

• 通过html5进行图片的上传，var formData = new FormData();创建formData对象，然后将需要上传的参数append到formData对象中。将上文提到的filesLlist进行遍历append到formData中。

$("#submitOrder").on('click', function() {
        var userName = $("#userName").val().trim();
        var amount = $("#amount").val().trim();
        var zhouqiSelect = $("#zhouqiSelect").find('select').eq(0).val();
        // 从url中获取productId;
        var url  = window.location.href;
        var productId = url.split("#")[1];

        if (userName.length != 0 && userName.length<5 && amount.length != 0 &&$(".house-img-upload").eq(0).find("img").length != 0) {

            var $upload_loading = $("#upload_loading");

            $upload_loading.fadeIn();


            var formData = new FormData();
            for (var i=0,l=filesList.length;i<l;i++) {
                formData.append(filesList[i].zidingyiname,filesList[i]);
            }

            formData.append('name',userName);
            formData.append('amount',amount);
            formData.append('zhouqi',zhouqiSelect);
            formData.append('productId',productId);
            formData.append('userId',$.cookie('userId'));
            formData.append('sectionId',$.cookie('sectionId'));
            formData.append('token',$.cookie('token'));

            $.ajax({
                url: urlEndPoint,  //server script to process data
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            }).done(function(res) {
                $upload_loading.fadeOut();

                CommonFn.saveCookie({"tips":res.tips})

                var _url = './orderSuccess.html';

                CommonFn.turnPageByPlatform(_url);
            }).fail(function(res) {
                $upload_loading.fadeOut();
                formData = null;
                alert('上传失败，请重新上传！');
                 window.location.reload();
            });;
        } else{
            alert("信息填写不正确！");
        }
    });