html5拖拽上傳插件

1. 基於bootstrup 3可預覽的html5文件上傳插件怎麼用

bootstrap實現的多種文件上傳插件，可選擇各種文件，解壓後請點擊index預覽

2. java怎樣實現跨伺服器文件上傳

另一台機器也要有處理文件上傳的WEB程序，你可以參考Stream上傳插件（支持HTML5和Flash兩種方式上傳）

Stream 上傳插件
Stream 是解決不同瀏覽器上傳文件的插件，是Uploadify的Flash版和Html5版的結合！

Stream 簡介
Stream 是根據某網的文件上傳插件加工而來，支持不同平台（Windows, Linux, Mac, Android, iOS）下，主流瀏覽器（IE7+, Chrome, Firefox, Safari, 其他）的上傳工作，當然在Html5標准下，還支持文件的斷點續傳功能，有效解決大文件的Web上傳問題！

主要特徵
1. 源碼完全開放，目前有Java、php、Perl三種後台語言實現

2. 支持HTML5、Flash兩種方式（跨域）上傳

3. 多文件一起上傳

4. HTML5支持斷點續傳，拖拽等新特性

5. 兼容性好IE7+, FF3.6+, Chrome*，Safari4+，遨遊等主流瀏覽器

6. 進度條、速度、剩餘時間等附屬信息

7. `選擇文件的按鈕`可以自定義

8. 簡單的參數配置實現 靈活多變的功能

9. 支持文件夾上傳（Chrome21+, Opera15+）

10. 支持自定義UI（V1.4+）

指定跨域上傳就可以了

3. Html5移動端上傳圖片並裁剪 - Clipic.js

Clipic.js插件可以為移動端 (僅支持移動端) 提供頭像上傳並裁剪成指定尺寸，用原生js開發的，輕量級，包含html跟css，不到8kb。點此鏈接體驗： https://teojs.github.io/clipic/

https://github.com/teojs/clipic

參數說明

width:Number (默認：500) – 裁剪寬度
height:Number (默認：500) – 裁剪高度
ratio:Number (可選) – 裁剪的比例，當傳入ratio時width/height將無效
src:String (必傳) – 需要裁剪的圖片，可以是圖片鏈接，或者 base64
type:String (默認：jpeg) – 裁剪後圖片的類型，僅支持 jpeg/png 兩種
quality:Number (默認：0.9) – 壓縮質量
buttonText:Array (默認：[『取消』, 『重置』, 『完成』]) – 底部三個按鈕文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

4. 為什麼我的電腦發郵件的時候就不能直接拖拽添加附件

發郵件的時候不能直接拖拽添加附件的主要原因是因為瀏覽器沒有載入相應的插件。

可以使用以下方法進行安裝插件：

1、點擊超大附件，如下圖：

3、點擊在線安裝——載入即可。

5. 利用HTML5開發移動應用有哪些優點

1.離線緩存為HTML5開發移動應用提供了基礎
HTML5 Web Storage API可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器後再次打開時恢復數據，以減少網路流量。
同時，這個功能算得上是另一個方向的後台「操作記錄」，而不佔用任何後台資源，減輕設備硬體壓力，增加運行流暢性。
在線app支持邊使用邊下載離線緩存，或者不下載離線緩存;而離線app必須是下載完離線
設計師要知道，什麼時候讓用戶下載離線緩存(注意在線和離線app的區別)。
2.音頻視頻自由嵌入，多媒體形式更為靈活
原生開發方式對於文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的URL並分別用不同的方式處理。
HTML5在這個方面完全不受限制，可以完全放在一起進行處理。
設計師要知道，如果新聞類、微博類、社交類應用的信息呈現中實現文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現在原生方式實現起來還有困難。
3.地理定位，隨時隨地分享位置
充分發揮移動設備對定位上的優勢，推動LBS應用發展。
可以綜合使用GPS、wifi、手機等方式讓定位更為精準、靈活。
地理位置定位，讓定位和導航不再專屬導航軟體，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
設計師要知道，現在嵌入LBS功能的應用越來越多，這也是移動設備與台式PC相比最大的優勢之一，HTML5能把這個優勢再度擴大化，好好想想怎麼在你設計的應用里用上吧!
4.Canvas繪圖，提升移動平台的繪圖能力
使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料
支持圖片的移動、旋轉、縮放等常規編輯
Canvas – 2D的繪圖功能支持
Canvas 3D – 3D的繪圖功能支持
SVG – 向量圖支援
設計師要知道，圖片的移動、旋轉、縮放?那都太基礎了，自己畫都是小case，至於怎麼用，好好想想吧!
5.專為移動平台定製的表單元素
瀏覽器中出現的html5表單元素與對應的鍵盤：

只需要簡單的聲明 <input type=」email」> 即可完成對不同樣式鍵盤的調用，簡捷方便。
設計師要知道，用的時候記得告訴研發同事一聲!

6.豐富的交互方式支持
提升互動能力：拖拽、撤銷歷史操作、文本選擇等
Transition – 組件的移動效果
Transform – 組件的變形效果
Animation – 將移動和變形加入動畫支持
設計師要知道，HTML5提供的交互方式是非常豐富的，至於用不用得上，那是你自己的事兒嘍!
7.HTML5使用上的優勢
更低的開發及維護成本;
使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低;
方便升級，打開即可使用最新版本，免去重新下載升級包的麻煩，使用過程中就直接更新了離線緩存。
設計師要知道，用戶想要什麼，HTML5能提供給用戶什麼。
8.CSS3 視覺設計師的輔助利器
CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸變、陰影
Border background – 邊框的背景支持
使用CSS3來完成部分視覺工作，載入速度快，節省代碼及圖片，也為用戶節約了帶寬。
設計師要知道，一個界面里幾十張素材圖的方式已經太out啦，趕快讓CSS3幫你偷懶。

9.實時通訊
以往網站由於HTTP協議以及瀏覽器的設計，實時的互動性相當的受限，只能使用一些技巧來「模擬」實時的通訊效果，但HTML5提供了完善的實時通訊支持。
設計師要知道，應用中嵌入實時通信、信息內容進行實時提醒，HTML5可以幫你實現。
10.檔案以及硬體支持
不知道大家有沒有發現，在Gmail等新的網頁程序當中，已經可以透過拖拉的方式將檔案作為郵件附件?這就是HTML5檔案的功能中的Drag』n Drop和File API。
設計師要知道，移動應用中對於數據傳輸的需求越來越大，傳統的路徑選擇方式太過於繁瑣，快來試試HTML5的拖拽上傳功能吧!
11.語意化
語意化的網路是可以讓計算機能夠更加理解網頁的內容，對於像是搜索引擎的優化(SEO)或是推薦系統可以有很大的幫助。
設計師要知道，HTML5能讓搜索更快速、更准確。
12.雙平台融合的app開發方式，提高工作效率
依照目前iPhone/Android 迅速提升市佔率的情勢來看，未來如果想要在先進的智慧型手機上撰寫應用程式，要不是選擇使用Objective-C + CocoaTouch Framework 撰寫iPhone/iPad 應用程式，就是選擇Java + Android Framework 撰寫Android 應用程式，如果想要同時支援兩種平台，勢必要維護兩套程式碼，對於剛起步的小服務而言也算是個小有負擔的維運成本。
使用HTML5, CSS3 來撰寫Web-based 的應用程式，若要同時支援iPhone 及Android，幾乎只需要維護一份程式碼(少部份要因應clients 作修改)，而且未來若有其它行動裝置擁有支援HTML5 的瀏覽器，那同樣的WebApp 直接就多了一個支援平台。
Google 的系列服務使用了不少HTML5 中的cache、storage 及database 規格來做到離線存取程式的效果。因為比起桌面應用程式，行動裝置的網路連線更不穩定，而且有時在移動中並無網路可以使用，透過這些技術才能讓使用者即使在 無網路環境下繼續使用你的webapp。這說明html5主要服務對象還是給予web的應用，並不會對全部app開發造成威脅，這樣有利於不同類型應用使 用不同的開發方式，靈活性更強。

6. 怎樣用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);
});

7. 哪個javascript框架支持ajax方式的文件上傳

7款基於JavaScript和AJAX的文件上傳插件，這些插件基本上都能實現以下功能：
多文件上傳，拖拽操作，實時上傳進度，自定義上傳限制
1. jQuery File Upload
具有多文件上傳、拖拽、進度條和圖像預覽功能的文件上傳插件，支持跨域、分塊、暫停恢復和客戶端圖像縮放。可與任何服務端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持標準的HTML表單文件上傳。
2. Pixelcone Fileuploader

使用HTML5 API的jQuery文件上傳插件，支持AJAX上傳和拖拽操作，以及針對老版本瀏覽器的iframe上傳部件。有多種形式來實現多文件上傳，每種形式由單一的上傳腳本來控制。
3. Ajax Upload
該插件使用XHR來上傳多個文件，支持拖拽操作，可以在FF3.6+、Safari4+、Chrome等瀏覽器中完美運行。
4. Plupload
這是一個針對CMS或類似系統的、高度可用的上傳插件。支持分塊、拖拽、圖像縮放、限制文件大小、顯示上傳進度等。
5. Uploadify

Uploadify是一個jQuery插件，幫助你在網站中輕松添加多文件上傳功能，提供了兩個版本（HTML5、Flash）。支持多文件上傳、拖拽、實時進度顯示，提供了大量的定製功能。
6. Ajax File Upload
該插件是Ajaxupload插件的修改版本，不具備HTML5功能。
7. jQuery FileDrop

該插件使用HTML5 API，允許用戶從桌面拖動多個文件到瀏覽器中，並上傳每個文件到用戶指定的URL。該插件使用HTML5 FileReader()來讀取文件數據。

8. HTML5拖拽事件

圖片自帶拖拽功能
其他元素可設置draggable屬性

例子:

https://element.eleme.cn/#/zh-CN ---》組件（菜單）---》Tree樹形控制項---》可拖拽節點（右側）

只作為了解, 因為現在火狐已經沒有兼容問題

火狐瀏覽器下需設置dataTransfer對象才可以拖拽除圖片外的其他標簽

火狐在沒有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以

dataTransfer 是 拖拽事件對象的屬性

，參考上面的例子

通過FileReader對象可以讀取本地存儲的文件信息, 使用File對象 指定要讀取的文件數據

HTML5 新增的內置構造函數,可以讀取本地文件的信息

性能低,沒有必要吧這些字元串渲染到頁面中

讀取拖入的圖片信息，並顯示在頁面上

多文件的拖入上傳

利用FileReader讀取信息

9. jQuery HTML5 Uploader的用法,大哥大姐們.有人知道怎麼用么

在用火狐和chrome，但不知道這個東東。

10. html5拖拽圖片上傳，怎麼獲得圖片原始尺寸

用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢？即使你要在前端實用，比如PHP獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料！