html5上傳插件
1. 怎樣用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);
});
2. 誰有springmvc multipartfile html5 多文件上傳的示例代碼，急!急!急!
java"><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();
}
}
}
}
3. 移動開發中，遇到了安卓不能支持HTML5文件上傳的問題，怎麼解決
PC端上傳文件多半用插件，引入flash都沒關系，但是移動端要是還用各種冗餘的插件估計得被噴死，項目裡面需要做圖片上傳的功能，既然H5已經有相關的介面且兼容性良好，當然優先考慮用H5來實現。
用的技術主要是：
ajax；
FileReader；
FormData；
HTML結構：
4. 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;
}
}
});
5. html5uploader.js 怎麼兼容ie8
html5uploader.js 兼容ie8方法如下：
擁有兩個插件，一個是flash版本的uploadify，免費的。另一個是自己寫的html5版本的，名叫html5uploader(好俗的名字。。)，再加一個適配器uploadadapter，用來決定在什麼時候調用哪個插件。頁面中只調用uploadadapter。關鍵的難題就在於，頁面中的代碼是只寫一次的，不管是flash的還是html5的都得能識別出頁面上的參數，這也就是我的山寨版本的插件做的事情，原flash版本的配置參數通通得識別並有效。幸好，已經實現了。
上demo
很多東西，一上demo就都清楚了。。。
[html] view plain
<!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>無標題文檔</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg;*.png',
auto:false,
showUploaded:true,
baseurl:'.',//當前目錄
multi:true,
removeTimeout:9999999,
uploarl:'upload.php'
});
});
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
ie8下調用flash
firefox、chrome下調用html5
略有差異，ie8下圓角沒了。。。如果不喜歡這個樣式呢，就請打開css文件自己修改吧。
很簡單的調用，可以看到在頁面中使用的是uploadadapter，由它來決定調用哪個插件。倆個插件所需要的js文件和css文件都是非同步引入的，此處用到一個小插件loadScript。參數沒有寫全，可以自己看源代碼的注釋~
uploadadapter中的調用情況是我需要的配置，你也可以隨意修改。
四、相關文件注釋
在此把文件夾中的文件做一個簡要介紹：
/html5uploader html5上傳插件，你也可以拿來單獨使用
/uploadify3.2 flash上傳插件，也可以拿來單獨使用
/uploads 存放上傳的文件
/jquery.loadScript.js 用於非同步引入腳本的小插件
/jquery.uploadadapter.js 適配器，用來判斷客戶端類型，動態調用上傳插件
/upload.php 後台處理程序，最基本的
五、上源碼，注釋很全哦
http://download.csdn.net/detail/never_say_goodbye/5090639
六、一個bug！！
很重的哦，我之前給疏漏了，在這里說一下，文件就不重新上傳了
在jquery.html5uploader.js的158和164行，將$('.uploadify-progress')改為$('#'+file.index).fnd('.uploadify-progress')，否則上傳多個文件會混淆。
6. html5可以通過路徑上傳文件么
這個當然可以 只需要有合適的插件支持即可
7. 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();
}
8. html5文件上傳控制項的button樣式怎麼修改
你直接將它隱藏，然後自己寫一個button。
給這個button加點擊事件。
點擊事件中在通過JS去觸發上傳文件控制項的點擊事件就可以了。
9. 手機端其中一個模塊使用html5來開發，如何實現用HTML5調用選擇手機本地文件後上傳。
一.准備HTML文件及其資源文件
使用UIWebView載入本地的HTML4文件 index.html,在index.html中引用了本地的圖片、CSS文件、JS文件以及外部的圖片。
二.載入本地HTML文件
將html5文件及相關資源添加到項目中，調用需要上傳的文件夾。
三.選擇調用的文件夾上傳。