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

原创 2016年06月01日 12:40:02

 该上传方法对于不支持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("信息填写不正确!");
        }
    });
版权声明:本文为博主原创文章,未经博主允许不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

HTML5 FormData 方法介绍以及实现文件上传

本文介绍了 XMLHttpRequest Level 2 中的 FormData 接口,利用 FormData 我们可以轻松的实现文件上传,FormData 对象还有一些实用的方法,本文也对其一一进行...

HTML5异步上传图片(支持预览和进度条),使用其他按钮触发file onclick事件,解决某些浏览器无法触发的问题

很多情景下,都要求不要直接点击html的file标签,而是点击另外一个更加美观的图片,然后触发file标签的onclick事件打开系统的文件选择器。然而,某些低版本的浏览器为了安全,不支持onclic...

使用HTML5 FILE API上传图片移动端缩略图兼容问题

主要是解决某些浏览器存在base64编码显示不出图片来的问题

利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)

1、页面内容如下:                                                         文件内容变化就调用getImgUrl方法,获取变化后的文件,然...
  • lizi530
  • lizi530
  • 2016年06月17日 10:48
  • 2174

基于html5、JS实现的拍照上传图片

  • 2015年01月26日 16:34
  • 4.67MB
  • 下载

html5+.net 裁剪上传图片

  • 2016年06月15日 09:25
  • 102KB
  • 下载

手机网页中通过js+html5压缩上传图片

var imgTypeArr = new Array(); var imgArr = new Array(); var isHand = 0;//1正在处理图片 var nowImgType = "i...

Html5上传图片前本地预览

  • 2014年04月10日 09:28
  • 72KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5、formData移动浏览器上传图片
举报原因:
原因补充:

(最多只允许输入30个字)