html5图片预览上传
① 3、javascript+CSS+Html5实现图片预览（本地和网络图片）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px;
margin:50px auto;}
.pic{
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;}
.top-pic{
position:absolute;
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right;
-webkit-transform:scale(1,1);}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0);
-webkit-transform-origin:bottom left;
opacity: .5;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:bottom left;
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" /庆尺>
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</亩差败body>
</html>
随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
});
这里面用到CSS3，所以请不要用迅颤IE11以下的低版本浏览器，不然你啥都看不见
② html5拖拽图片上传，怎么获得图片原始尺寸
用后台语言去获取不就可以了。为什么一定要在前端来获取图片原始大小呢？即使你要在前端实用，比如php获取到了以后还是可以通过变量传递给前端的。至于PHP怎么获取图片原始大小这个网上很容易找到资料！
③ 怎么实现图片上传前预览功能呢
预览图片
预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。
<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4" ōnchange="preview4()" />
<img id="pic4" src="" alt="图片在此显示" width="120"/>
</form>
<scrīpt type="text/javascrīpt">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}
else{ alert("您选择的似乎不是图像文件。"); }
}
</scrīpt>
试下效果：
如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：
在Firefox的地址栏中输入“about:config”
继续输入“security.checkloari”
双击下面列出来的一行文字，把它的值由true改为false
然后你可以再试试上面预览，everything works well！可惜的是我们并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。
用DOM来创建对象
在上面的XHTML代码中，我们为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持Javascrīpt，他不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，我们就需要在“运行时”再生成这个img对象，途径还是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" ōnchange="preview5()"/>
</form>
<scrīpt type="text/javascrīpt">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value)
return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){ y.src = 'file://localhost/' + x.value; }
else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}
else{ alert("您选择的似乎不是图像文件。"); }
}
</scrīpt>
④ 怎样用html5实现拖拽上传文件
，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片！");
return false;
}
//拖拉图片到浏览器，可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上传大小不能超过500K.");
return false;
}
var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
⑤ H5怎么制作是什么
完整的H5页面的制作流程为：策划案——原型图——文案拟定——视觉设计——动画设计——音效编辑——代码或工具实现——上线这是一种比较理想的作业流程，一般到了一定规模的制作公司会采用这种方式。如果公司的细分程度做不到这么细的话，那就身兼数职，但是流程是不变的。
1、H5页面正规流程下需要用什么软件制作（不要网上那种几张图片摆摆自动生成的）策划阶段：word、PPT，我还见过用excel做策划案的（还做得相当不错呢）原型：墨刀、OmniGraffle、Origami、乎之原型、Easel、Prott（其实我常常就是在纸上画出来，然后丢给设计童鞋，如果是设计童鞋参与到策划阶段，可以直接出简单的手绘稿）视觉设计：PS、AI动画设计：AE，C4D音效编辑：garageband、finalcut、AdobePremiere实现：大众型工具：MAKA、兔展、易企秀，还有很多，也很优秀。利用模板，支持一定范围的自由创作。
2、需要用到哪些技术（比如哪些程序语言）Html5,、CSS3、js、three.js、webGL、node.js、SVG、PHP……如果是做H5的游戏，那就涉及到egret和layabox和cocos，我们用egret多些。哦对了，还有一些开发接口：网络API、微信红包API、还有图片识别和声音识别的接口。