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

来源：互联网发布：linux查看arp表编辑：程序博客网时间：2024/05/17 04:28

　该上传方法对于不支持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("信息填写不正确！");        }    });

1 0