html5上传文件代码
㈠ 如何在手机浏览器中运用HTML5的文件API实现上传多图功能
Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能，还有一些网站继续采用Html <form>with enctype=multipart/form-data，但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时，你发送给它一个字节流，所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器，在这个过程一直在不断的进行文件的上传。这种方式运行的非常好，不像Flash上传那这样充满了问题(特别是处理大文件上传的时候)，然而这种方法是相当复杂的并且听起来不容易理解，因为你本质上是接管了整个服务器端的处理（获取字节流的时候）同时包括了在服务器端实现multipart/form-data协议，伴随一系列的其他事情。
使用Html5 上传文件
XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：
处理字节流，例如作为上传或者下载的File，Blob，FormData对象
上传或者下载中的进度事件
跨站点请求
允许创建匿名请求
可以设置请求超时
在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。
图1：文件上传画面-准备上传 图2：显示上传完成画面
注意：上面的图片中，信息提示区域是提供给用户的：
当前选中文件的信息
文件名
文件大小
文件类型
上传完成多少的百分比进度条
上传速度或者上传带宽
距离上传完成大概还有多长时间
已上传文件大小
服务器端的响应
上面第6项或许看起来不重要，但事实上是相当重要的。因为我们用XMLHttpRequest，上传发生在后台，页面没有发生跳转等任何变化，所以对于你用它处理其他一些事情来说是一个非常好的特性。
Html5 Progress Event
对于Html5 Progress Events规范，Html5 Progess Events提供了下列与本次讨论相关的信息
total - 总的字节数
loaded - 到目前为止上传的字节数
lengthComputable - 可计算的已上传字节
请注意到我们需要用两个信息去计算要显示给用户的其他所有信息。要计算出来其他的信息通过上面我们得到信息是相当容易的，但是那需要一些额外的代码并且创建一个定时器。
Html5 Progress Event 应该是什么
考虑到有一部分人想更好的提供给用户所有的信息，所以Html5 Progress Event应该更好的满足需要，因为它给浏览器供应商提供这些额外信息是相当简单的，所以建议progress event应该修改成如下：
total - 总的字节数
loaded - 到目前为止上传的字节数
lengthComputable - 可计算的已上传字节
transferSpeed long类型
timeRemaining javaScript 日期对象
Html5 上传 用XMLHttpRequest
浏览器支持情况
支持这一特性的浏览器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持这一特性
简单的示例
下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码，只是实现了基本的功能，感兴趣的可以自己做扩展。 需要吧上传接口修改成自己服务的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.do");//修改成自己的接口
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
㈡ 谁有springmvc multipartfile html5 多文件上传的示例代码，急!急!急!
<formid="fileUpload"action="<%=basePath%>template/fileUpload.do"enctype="multipart/form-data"method="post"class="form-horizontal">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"
aria-hidden="true">×</button>
<h4class="modal-title"id="myModalLabel"style="color:#15428b;">上传</h4>
</div>
<divclass="modal-body">
<inputtype="file"name="targetFile">
<inputtype="file"name="targetFile">
<inputtype="file"name="targetFile">
</div>
<divclass="modal-footer">
<buttonid="cancel"type="button"class="btnbtn-default"data-dismiss="modal">取消
</button>
<buttontype="button"class="btnbtn-primary"onclick="uploadFile();">确认</button>
</div>
</form>
@RequestMapping(value="/fileUpload.do")
publicStringfileUpload(Modelmodel,@RequestParamMultipartFile[]targetFile,HttpServletRequestrequest,PageSplit<BankVo>pageSplit){
try{
FileOperationsUtil.uploadFileMVC(request,targetFile,"/files/temporary");
model.addAttribute("msg","文件上传成功！");
}catch(Exceptione){
logger.error(e);
model.addAttribute("msg","文件上传失败！");
}
returnthis.allButton(model,request,pageSplit);
}
publicstaticvoiploadFileMVC(HttpServletRequestrequest,MultipartFile[]fileSource,StringfileTarget){
for(MultipartFilefile:fileSource){
if(file.isEmpty()){
System.out.println("文件未上传");
}else{
//如果用的是Tomcat服务器，则文件会上传到\%TOMCAT_HOME%\webapps\项目\fileTarget\文件夹中
StringrealPath=request.getSession().getServletContext().getRealPath(fileTarget);
//这里不必处理IO流关闭的问题，因为FileUtils.InputStreamToFile()方法内部会自动把用到的IO流关掉，我是看它的源码才知道的
try{
FileUtils.InputStreamToFile(file.getInputStream(),newFile(realPath,file.getOriginalFilename()));
}catch(IOExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
}
}
}
㈢ 如何使用html5的FileApi上传大文件
根本不需要那么麻烦，装一个扩展就实现了，代码都不用写。
AetherUpload-Laravel提供超大文件上传的Laravel扩展包，支持分组配置、断线续传、秒传等功能，简单易用，满足多数人的主流需求，无需编写适配代码，几乎开箱即用。
㈣ HTML文件上传
使用 input ，指定类型为 file ，来完成文件上传功能。
多文件上传需要在标签上添加 mulyiple 属性：
使用 accept 属性来限制上传文件的类型，当然这么做任然是不可靠的，还需要后端做进一步的判断。
如果我们是用户，当我们上传了一张图片，却只显示了几个文字，是不是很不爽，那我们怎么来实现预览功能呢？
我们可以使用 FileReader 将图像转换为二进制字符串，然后添加 load 事件监听，在文件上传成功后获取二进制字符串。
显示文件上册进度 来提高用户体验
FileReader 还有一个 progress 事件，表示当前上传进度，配合HTML5的 progress 标签，我们来模拟一下文件的上传进度。
㈤ html5网页背景图手动上传切换代码怎么写
html5网页背景图手动上传切换代码这样写。
1、html5网页背景图手动枣含上传切换代码需要在网页上点击鼠标右键查看网站源代码。
2、找到css里面的背景图这一段代码，查看背绝伏景凳宏笑图路径，通过ftp或者服务器进行替换图片即可。
㈥ 用HTML5方式上传文件403错误啥意思
403错误，是一种在网站访问过程中，常见的错误提示。
403错误，表示资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致的WEB访问错误。
403.1错误是由于"执行"访问被禁止而造成的，若试图从目录中执行 CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序时便会出现此种错误。
403.2错误是由于"读取"访问被禁止而造成的。导致此错误是由于没有可用的默认网页并且没有对目录启用目录浏览，或者要显示的HTML网页所驻留的目录仅标记为"可执行"或"脚本"权限。
403.3错误是由于"写入"访问被禁止而造成的，当试图将文件上载到目录或在目录中修改文件，但该目录不允许"写"访问时就会出现此种错误。
403.4错误是由于要求SSL而造成的，您必须在要查看的网页的地址中使用"https"。
403.5错误是由于要求使用 128 位加密算法的 Web浏览器而造成码袜中的，如果您的浏览器不支持128位加密算法就会出现这个错误，您可以连接微软网站进行浏览器升级。
403.6错误是由于IP 地址被拒绝而造成的。如果服务器中有不能访问该站点的 IP 地址列表，并且您使用的 IP 地址在该列表中时您就会返回这条错误信息。
403.7错误是因为要求客户证书，当需要访问的资源要求浏览器拥有服务器能够识别的安全套接字层(SSL) 客户证书时会返回此种错误。
403.8错误是由于禁止站点访问而造成的，若服务器中有不能访问该站点的 DNS 名称列表，而您使用的 DNS 名称在列表中时就会返回此种信息。请注意区别403.6与403.8错误。
403.9错误好腔是由于连接的用户过多而造成的，由于Web 服务器很忙，因通讯量过多而无法处理请求时便会返回这条错迟山误。
403.10错误是由于无效配置而导致的错误，当您试图从目录中执行 CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序时便会返回这条错误。
403.11错误是由于密码更改而导致无权查看页面。
403.12错误是由于映射器拒绝访问而造成的。若要查看的网页要求使用有效的客户证书，而您的客户证书映射没有权限访问该Web站点时就会返回映射器拒绝访问的错误。
403.13错误是由于需要查看的网页要求使用有效的客户证书而使用的客户证书已经被吊销，或者无法确定证书是否已吊销造成的。
403.14错误[2] Web 服务器被配置为不列出此目录的内容，拒绝目录列表。
403.15错误是由于客户访问许可过多而造成的，当服务器超出其客户访问许可限制时会返回此条错误。
403.16错误是由于客户证书不可信或者无效而造成的。
403.17错误是由于客户证书已经到期或者尚未生效而造成的。
㈦ 怎样用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);
});
㈧ C# .NET从操作系统直接拖拽文件，并上传到服务器。求html5具体代码
这个和html5 没有关系， 和浏览器有关系， 可以给你两穗档哗个方向，
第一： 如果你是使用的IE系列的浏览器， 那么只有一种方式，编猜行写一个Active X控件，这个可以完成，但是比较复杂， 不过windows 的all in one framework里面有用C#编写Active X 控件的例子，你可以参考一下， 如果能用..net 开发的话，这个拖拽功能网上一大片的代码，自己搜索一下，主蠢绝要是要搞定那个Active X控件。也可以用C++ 来编写， 这个有很多的模板。
第二， 如果你是用IE之外的，如火狐， chorme之类的， 你可以参考一下 网络 google 等写的js代码， 这些搜索引擎的图片搜索里面有一个以图找图， 这个是用js实现的， 好像叫做 dragdrop.js的，你打开这个页面就能看到这个js ，自己下载吧
㈨ 用HTML5方式上传文件403错误啥意思
http状态码 403 （禁止） 服务器拒绝请求。
常有的状态代码表示请求可能出错，妨碍了服务器的处理。
http状态码 400 （错误请求） 服务器不理解请求的语法。
http状态码 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
http状态码 404 （未找到） 服务器找不到请求的网页。
http状态码 405 （方法禁用） 禁用请求中指定的方法。
http状态码 406 （不接受） 无法使用请求的内容特性响应请求的网页。
http状态码 408 （请求超时） 服务器等候请求时发生超时。
http状态码 409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
http状态码 410 （已删除） 如果禅绝亮请求的资源已永久删除，服务器就会返回此响应。
http状态码 411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
http状态码 412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
http状态码 413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，贺宽超出服务器的处理能力。
http状态码 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
http状态码宏袭 415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
㈩ html5文件上传实现进度条需要后端吗
不需要后端的，前端自己判断，代码如下：
function uploadFile(){
// 获取上传文件，放到 formData对象里面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//这里上传的数据使用了formData 对象
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});