189 8069 5689
拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。
创新互联-专业网站定制、快速模板网站建设、高性价比武汉网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式武汉网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖武汉地区。费用合理售后完善，十年实体公司更值得信赖。
html5里有一个fileReader的全局变量，用来读取本地文件，比如txt，img等，下面是一个简单的代码。
function checkFile(files){
var file = files[0];
var reader = new FileReader();
// show表示div id='show'/div，用来展示图片预览的
if(!/image\/\w+/.test(file.type)){
show.innerHTML = "请确保文件为图像类型";
return false;
}
// onload是异步操作
reader.onload = function(e){
show.innerHTML = 'img src="'+e.target.result+'" alt="img"';
}
reader.readAsDataURL(file);
}
这样就能够在不上传到服务器的前提下预览图片。当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。
在上面的例子中，就能通过下面的方式获取到：
var width = e.target.naturalWidth;
var height = e.target.naturalHeight;
还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：
var img = document.getElementsByTagName('img')[0]; // 获取到图片
var width = img.naturalWidth;
var height = img.naturalHeight;
这个并不是那么简单做出来的，一般情况下会加一段iframe代码，模拟ajax上传。
代码很简单，如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleBy：DragonDean/title
script type="text/javascript"
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
/script
/head
body
table width="100%" border="0" cellspacing="0" cellpadding="0"
tbody
tr
td height="101" align="center"
div id="localImag"img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;"/div
/td
/tr
tr
td align="center" style="padding-top:10px;"input type="file" name="file"
id="doc" style="width:150px;" onchange="javascript:setImagePreview();"/td
/tr
/tbody
/table
/body
/html
预览图片
预览功能的基本设计思路：创建一个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 = "" + x.value;
}
else{ alert("您选择的似乎不是图像文件。"); }
}
/scrīpt
试下效果：
如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：
在Firefox的地址栏中输入“about:config”
继续输入“security.checkloaduri”
双击下面列出来的一行文字，把它的值由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 = '' + x.value; }
else{
var img=document.createElement('img');
img.setAttribute('src',''+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}
else{ alert("您选择的似乎不是图像文件。"); }
}
/scrīpt
bootstrap实现的多种文件上传插件，可选择各种文件，解压后请点击index预览
，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
$(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(filesize500){
alert("上传大小不能超过500K.");
return false;
}
var str = "img src='"+img+"'p图片名称："+filename+"/pp大小："+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);
});
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleTransform/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以下的低版本浏览器，不然你啥都看不见