html5文件上传预览
❶ html5超大文件上传如何实现
后端code
<?php
class Upload{
private $filepath = './upload'; //上传目录
private $tmpPath; //PHP文件临时目录
private $blobNum; //第几个文件块
private $totalBlobNum; //文件块总数
private $fileName; //文件名
private $md5FileName;
public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){
$this->tmpPath = $tmpPath;
$this->blobNum = $blobNum;
$this->totalBlobNum = $totalBlobNum;
$this->fileName = $this->createName($fileName, $md5FileName);
$this->moveFile();
$this->fileMerge();
}
❷ 有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档
目前找到的几种方式：
1.像以前的网络文库那样，先转换成flash，然后放在网页上。
说明：使用软件OpenOffice/LibreOffice，swftools。
优点：在国内，由于Flash安装量很大，而且很多人用IE和Chrome内核的浏览器，所以是可以查看的。
缺点：OpenOffice/LibreOffice转换的结果可能会丢失格式/排版（我没试过所以不知道会不会），而且比较耗服务器资源，如果浏览器没装Flash就没法查看文档了，尤其是移动端。
2.转换成PDF，然后用Mozilla的pdf.js查看。
说明：转换成PDF的方法可以用OpenOffice/LibreOffice，也可以用七牛的第三方服务“文档转换”（由亿方云提供）。
优点：如果是把文件存放在七牛云，用在线的服务会比较有保障，加载速度也快。
缺点：收费，不过费用很低廉，pdf.js可能比较大，加载相对慢点，放到七牛上面会好些，对移动端支持不好。
3.转换成HTML，像现在的网络文库那样。
说明：使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出，类似现在的网络文库。
优点：浏览器无需安装任何插件，也不用担心兼容性问题，还支持移动端。
缺点：可能会丢失格式，而且用户可以直接拷贝文档内容，如果是扣积分下载的话，可能达不到目的。
❸ PHP怎样上传图片以及预览图片
本地图片，就搞个img，设置他的src就可以实现；
参考如下：
<div class="column " style="width: 400px; margin-left: 200px;" id="imageShow">
<div id="proctImageNew">@*用于图片预览*@
</div>
<div id="proctImage">
<div class="widget the-common-margin-top" style="height: 400px; border: 1px solid #eeeeee;
padding: 3px;">
<img id="imgHolder" style="max-height: 390px; max-width: 390px;" />
</div>
</div>
</div>
<form id="formImageUpload" name="formImageUpload" method="post" action="/DocTeam/ProctsImage/UploadImage"
enctype="multipart/form-data">
<div id="fileDiv">
<input type="file" id="theFile" name="theFile" size="20" style="cursor: pointer;
width: 65px; height: 60px; position: absolute; filter: alpha(opacity:1); -moz-opacity: 0;
opacity: 0; z-index: 102;" />
</div>
<input type="hidden" name="imageId_hide" id="imageId_hide" />
</form>
<div id="cover" style="position: absolute; background-color: White; z-index: 10;
filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; overflow: auto; width: 400px;">
<input id="selectImage" type="button" style="width: 65px; height: 60px;" value="Select" />
<br />
<br />
<input type="button" value="Upload" id="imageUpload" style="width: 65px; height: 60px;"
disabled="disabled" onclick="javascript:uploadImage();" />
</div>
//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
}
var a = document.selection.createRange().text;
// newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
// newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
//newPreview.style.width = 390 + "px";
newPreview.style.height = 390 + "px";
newPreview.style.border = "solid 1px #eeeeee";
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
// tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
newPreview.style.display = "block";
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}
function setTheFileButton_Cover_SelectImageButton() {
// debugger;
// var position = $("#selectImage", "#cover").position();
// var css = { top: position.top, left: position.left };
// $("#theFile", "#fileDiv").css(css);
}
var $imgHolder = $('#imgHolder', "#proctImage");
var tempDiv = $("#temp_div");
$("#select", "#cover").click(function () {
$("#theFile", "#fileDiv").click().select();
});
$("#theFile", "#fileDiv").click(function () {
$(this).blur();
});
$("#theFile", "#fileDiv").change(function () {
PreviewImage(this, 'imgHolder', 'proctImage');
setTheFileButton_Cover_SelectImageButton();
// alert("预览已生成!");
$("#imageUpload").prop("disabled", false);
});
❹ HTML5如何上传本地文件并播放 想用button打开本地文件在video标签中进行播放，如何实现
不说怎么实现，
你这个方案在网站设计中就是一个大忌，
“用户输入的东西都是邪恶的”，相信你的老师跟你说过这句话吧，
如果用户上传的是挂马的文件，你的网站就会很危险，
一般的网站都会对用户上传的文件夹做多重限制，一般都不会给执行权限。
❺ 基于bootstrup 3可预览的html5文件上传插件怎么用
bootstrap实现的多种文件上传插件，可选择各种文件，解压后请点击index预览
❻ 怎么实现图片上传前预览功能呢
预览图片
预览功能的基本设计思路：创建一个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拖拽图片上传，怎么获得图片原始尺寸
用后台语言去获取不就可以了。为什么一定要在前端来获取图片原始大小呢？即使你要在前端实用，比如PHP获取到了以后还是可以通过变量传递给前端的。至于PHP怎么获取图片原始大小这个网上很容易找到资料！
❽ 怎样用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);
});