本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> Asp.net专题(WCF/WPF/WF)
立即购买视频教程 H5文件上传中注意的问题
夜鹰教程网 来源:www.yyjcw.com 日期:2017/6/30 10:54:58
分享到:
H5文件上传中注意的问题

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

简单记录下今早做H5上传中一些代码还有坑


一、展示


因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有




解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示的内容可以做成自己想要的样子。代码如下:


复制代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

        <title></title>

        <style>

            div{width: 100%;}

            .logo img{display:block; margin:0 auto;}

            .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;

                    color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;

                    margin: 0 auto;

                    }

            .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}

            .upload form input{width: 100%;}

        </style>

    </head>

    <body>

        <div class="logo">

            <img src="img/1.jpg" />

        </div>

        <div class="upload">

            <p>上传图片</p>

            <form>

                <input type="file" />

            </form>

        </div>

    </body>

</html>

复制代码

样子如左图,这样展现就在“上传图片”这个p标签中,点击它就有选择file的效果


 


二、JS代码


我这边写的蛮简单的,只是用了下h5上传的的基本功能


html代码如下,action为要请求的路径,我这边做的是当文件发生改变时就上传修改头像,input标签的name属性不能省去,具体跟后端接口有关


<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">

     <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />

</form>

复制代码

var iMaxFilesize = 2097152; //2M

window.fileSelected = function() {

    var oFile = document.getElementById('imageFile').files[0];    //读取文件

    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

    if (!rFilter.test(oFile.type)) {

        alert("文件格式必须为图片");

        return;

    }

    if (oFile.size > iMaxFilesize) {

        alert("图片大小不能超过2M");

        return;

    }

    var vFD = new FormData(document.getElementById('uploadForm')),    //建立请求和数据

        oXHR = new XMLHttpRequest();

    oXHR.addEventListener('load', function(resUpload) {

        //成功

    }, false);

    oXHR.addEventListener('error', function() {

        //失败

    }, false);

    oXHR.addEventListener('abort', function() {

        //上传中断

    }, false);

    oXHR.open('POST', actionUrl);

    oXHR.send(vFD);

};

复制代码

 


三、图片压缩


在开发中,特别是在移动端往往一张图片大小在3,4M左右,这样的图片上传会给服务器带来不少压力,同时也有不少接口对img的大小有所要求,比如不能超过200K,那手机相册的照片大多是见了鬼的,都上传不了。在html5的功能中,可以将图片压缩大小(尺寸)放到canvas画布上,然后截取canvas画布上的图片,转变为二进制的数据,通过blob进行再次压缩生成图片文件,这样手机上4M左右图片传到服务器上也就100K左右了。


<input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">

     <input hidden="hidden" name="param" value="test" />

</form>

当文件改变时,对图片进行压缩上传


复制代码

window.fileSelected = function() {

    var _this = $(this);

    var file = this.files[0];

    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

    if(!rFilter.test(file.type)) {

        alert("文件格式必须为图片");

        return;

    }

    /*开始进行网络加载*/

    _this.css("display", "none");    //目的是为了屏蔽点击事件

    var reader = new FileReader() , image = new Image() ,

        canvas = document.createElement("canvas") , ctx = canvas.getContext("2d");

    reader.onload = function() {        //文件加载完成

        var url = reader.result;

        image.src = url;

    };

    image.onload = function() {        //图片加载完成

        var w = image.naturalWidth , h = image.naturalHeight ,

            scale = 3;        //图片缩放比例,这里是把图片大小高宽均缩小3倍

        canvas.width = w / scale;

        canvas.height = h / scale;

        ctx.drawImage(image, 0 , 0 , w , h ,

            0 , 0 , canvas.width , canvas.height);

        fileUpload();    

    };

    reader.readAsDataURL(file);        //用文件加载器加载文件

    function fileUpload() {        //文件上传方法

        var quality = 0.3;        //图片的质量,这里设置的是0.3

        var data = canvas.toDataURL("image/jpeg", quality);//获取画布图片,并且要jpg格式

        data = data.split(',')[1];

        data = window.atob(data);

        var ia = new Uint8Array(data.length);

        for(var i = 0; i < data.length; i++) {

            ia[i] = data.charCodeAt(i);

        }

        var blob = new Blob([ia], {            //以上均为二进制参数处理,从而获取一个blob对象

            type: "image/jpeg"

        });

        var fd = new FormData(document.getElementById("uploadForm"));

        fd.append("XXX"  , blob , "upload.jpg");    //向form中加入图片数据,name属性是XXX,文件名是upload.jpg

        var xhr = new XMLHttpRequest();

        xhr.addEventListener('load', function(resUpload) {

            _this.css("display", "");

            //请求成功

        }, false);

        xhr.addEventListener('error', function(){

            _this.css("display", "");

            //请求失败

        }, false);

        xhr.addEventListener('abort', function(){

            _this.css("display", "");

            //上传终止

        }, false);

        xhr.open('POST', "http://XXXXXXXXXXXXX");//请求地址

        xhr.send(fd);//发送

    }

};

复制代码

关键代码


reader.readAsDataURL(file);

将文件读取为DataURL


canvas.toDataURL(type, encoderOptions); 

实际上就是读取canvas画布上图片的数据。其默认是png格式,如果第一个参数type是image/jpeg的话,第二个参数encoderOptions就可以用来设置图片的压缩质量。


复制代码

var quality = 0.3;        //图片的质量,这里设置的是0.3

var data = canvas.toDataURL("image/jpeg", quality);//获取画布图片,并且要jpg格式

data = data.split(',')[1];

data = window.atob(data);

var ia = new Uint8Array(data.length);

for(var i = 0; i < data.length; i++) {

    ia[i] = data.charCodeAt(i);

}

var blob = new Blob([ia], {            //以上均为二进制参数处理,从而获取一个blob对象

    type: "image/jpeg"

});

复制代码

这一段代码的的目的是为了解码图片数据,然后返回一个Blob对象,对象的格式是jpg。aton其作用是做解码,因为图片格式的base64,该方法解码出来可能是一堆乱码,Uint8Array返回的是8进制整型数组。


Blob是存储二进制文件的容器,典型的Blob对象是一个图片或者声音文件,其默认是PNG格式。最后的blob就可以传给服务端了。


整理成一个插件,代码如下


复制代码

(function(window,undefind){

    function imgUpLoad(options){

        var defaults = {

            inputId : "" ,        //输入框ID

            formId : "" ,        //表单ID

            paramName : "" ,        //输入框的name

            requestUrl : "" ,     //请求的URL

            imgSizeScale : 3 ,     //图片缩放比例

            imgQuality : 0.3 ,    //图片质量

            sucFun : undefind , //成功的回调函数

            errFun : undefind , //失败的回调函数

            abortFun : undefind     //上传取消的回调函数

        };

        var opts = $.extend(true , defaults , options || {}) ,

            _this = document.getElementById(opts.inputId);

        _this.addEventListener('change' , fileChange , false);    

        function fileChange() {

            var file = _this.files[0];

            var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

            if(!rFilter.test(file.type)) {

                alert("文件格式必须为图片");

                return;

            }

            var reader = new FileReader() , image = new Image() ,

                canvas = document.createElement("canvas") , ctx = canvas.getContext("2d");

            startFileLoad(reader , image , canvas , ctx);

        }

        function startFileLoad(reader , image , canvas , ctx){    //文件加载

            reader.onload = function() {        //文件加载完成

                var url = reader.result;

                image.src = url;

            };

            image.onload = function() {        //图片加载完成

                var w = image.naturalWidth , h = image.naturalHeight;

                canvas.width = w / opts.imgSizeScale;

                canvas.height = h / opts.imgSizeScale;

                ctx.drawImage(image, 0 , 0 , w , h ,

                    0 , 0 , canvas.width , canvas.height);

                fileUpload(canvas);    

            };

            reader.readAsDataURL(file);    

        }

        function fileUpload(canvas){        //文件上传

            var blob = getBlob(canvas);

            var fd = new FormData(document.getElementById(opts.formId));

            fd.append(opts.paramName  , blob , "upload.jpg");

            var xhr = new XMLHttpRequest();

            xhr.addEventListener('load', function(resUpload) {    //请求成功

                _this.style.display = "";

                if(opts.sucFun && typeof opts.sucFun === "function")        opts.sucFun(resUpload.currentTarget.response);

            }, false);

            xhr.addEventListener('error', function(){    //请求失败

                _this.style.display = "";

                if(opts.errFun && typeof opts.errFun === "function")        opts.errFun();

            }, false);

            xhr.addEventListener('abort', function(){    //上传终止

                _this.style.display = "";

                if(opts.abortFun && typeof opts.abortFun === "function")        opts.abortFun();

            }, false);

            xhr.open('POST', opts.requestUrl);//请求地址

            xhr.send(fd);//发送

        }

        function getBlob(canvas){        //获取blob对象

            var data = canvas.toDataURL("image/jpeg", opts.imgQuality);

            data = data.split(',')[1];

            data = window.atob(data);

            var ia = new Uint8Array(data.length);

            for(var i = 0; i < data.length; i++) {

                ia[i] = data.charCodeAt(i);

            }

            return new Blob([ia], {            

                type: "image/jpeg"

            });

        }

    }

    window.imgUpLoad = imgUpLoad;

})(window);

复制代码


复制链接 网友评论 收藏本文 关闭此页
上一条: .net方向初级研发工程师面试的题目…  下一条: 完全并发处理HTTP请求示例 C# 异步Http…
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
表单提交中get和post方式的区别有…
解决ASP中UTF-8与GB2312编码转换乱…
asp数组中REDIM的用法(动态数组)…
生成html的新方法ASP
ASP字符串函数大全
ASP生成Word文件的代码
ASP中Randomize随机函数的使用
十天学会ASP教程之第一天:安装调…
自定义的asp日期格式化函数
防范ASP网站漏洞的八大法则之一
十天学会ASP教程之第二天:表单传…
asp中关于从utf8页面到gb2312页面…
ASP教程:实现长文章分页功能
IIS6架设网站的问题总结
五分钟打开 allow_url_fopen 的最…
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
如何将WCF服务部署到远程服务器
对WebApi 实现服务端信息的监控
用WCF生成Restful风格的接口返回 …
只有一个地址如何调用WCF服务
WCF简介
搭一个简单的wcf服务
WCF配置说明
WCF传输的数据量过大问题的解决方…
asp.net大文件分块上传文件秒传断…
http断点续传总结
http状态码206与断点续传下载原理…
.net方向初级研发工程师面试的题目…
H5文件上传中注意的问题
完全并发处理HTTP请求示例 C# 异步…
c#实现多线程调用参数传递
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html