html上傳文件插件
A. 移動開發中，遇到了安卓不能支持HTML5文件上傳的問題，怎麼解決
PC端上傳文件多半用插件，引入flash都沒關系，但是移動端要是還用各種冗餘的插件估計得被噴死，項目裡面需要做圖片上傳的功能，既然H5已經有相關的介面且兼容性良好，當然優先考慮用H5來實現。
用的技術主要是：
ajax；
FileReader；
FormData；
HTML結構：
B. extjs 3.4中 怎麼給htmlEdit添加圖片插件 實現圖片上傳功能
首先要使用extjs自帶的HTMLEditor，然後在原有的工具條上添加一個圖片按鈕，點擊這個圖片按鈕要彈出窗口，這個窗口負責實現上傳功能，實現上傳後，要將上傳的圖片路徑添加到HTMLEditor的游標處，並且要以<IMG></IMG>的方式，這樣HTMLEditor才能解析出來。實現代碼如下：
前台JSP頁面
fieldLabel : '商品特性',
id : 'shopSp.spTxms',
name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'
這其中引用了StarHtmleditor，StarHtmleditor.js的代碼如下，直接將代碼復制下來，然後新建個JS，全復制進去就行了。
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '選擇文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能為空',
anchor : '90%'
}],
buttons : [{
text : '上傳',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上傳......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能傳一個圖片
//更新後的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上傳失敗',action.result.errors.msg);
}
});
}
}, {
text : '關閉',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上傳圖片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 網上是沒有var的，不用var不知道為什麼總是報錯，另外JS一定要與JSP的編碼方式一致，要不然報莫名其妙的錯誤，而且錯誤都沒有顯示。
後台java代碼
/****
* HTMLEditor增加上傳圖片功能：
* 1、上傳圖片後，需要將圖片的位置及圖片的名稱返回給前台HTMLEditor
* 2、前台HTMLEditor根據返回的值將圖片顯示出來
* 3、進行統一保存
* @param 上傳圖片功能
* @return JSON結果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}
特別要注意的是路徑問題，路徑問題主要有2點需要注意：
1、前台頁面引用StarHtmleditor.js的路徑一定要正確；
2、Htmleditor上傳的圖片路徑一定要改，因為上傳之後圖片路徑變為http://localhost:8080/，在正常使用中圖片不顯示，要將該地址替換為伺服器的IP地址；替換方法如下：
//獲取本地IP地址,因為extjs的htmleditor上傳的照片路徑有問題，需要將路徑替換為本機IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
這樣基本就完成了這個HTMLEditor上傳圖片功能。
如圖：
C. 文件上傳插件這個是什麼意思action="server/php
創建一個文件上傳表單
允許用戶從表單上傳文件是非常有用的。
請看下面這個供上傳文件的 HTML 表單：
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
請留意如下有關此表單的信息：
<form> 標簽的 enctype 屬性規定了在提交表單時要使用哪種內容類型。在表單需要二進制數據時，比如文件內容，請使用 "multipart/form-data"。
<input> 標簽的 type="file" 屬性規定了應該把輸入作為文件來處理。
D. 急求ewebeditor之類的HTML編輯器如何讓用戶編輯其上傳到本地伺服器的指定HTML文件
用fso插件把html文件讀取出來，放到那個ewebedit文本框中，提交後再把編輯的內容生成一個html文件。
在線編輯器插件for leadbbs 3.14下載地址:
http://www.ziyuan8.com/code/softdown.asp?softid=5753
功能簡介：
1：本系統可以在線編輯包括htm、html、asp、cgi、php、txt等格式的所有網頁文件。(免FSO)
2：輸入了一個不存在的文件名則會新建一個文件。(在不允許新建文件時會出現文件無法被打開的提示。)
3：請在文件名框內直接輸入你想編輯的或新建的網頁文件名。其它目錄下的文件請在文件名框內輸入類似於「../2/test.htm"格式的路徑。
4：演示用文件名----Test.htm
E. html5可以通過路徑上傳文件么
這個當然可以 只需要有合適的插件支持即可
F. sublime text 3寫的html文件如何上傳到伺服器
在FTP軟體中，選中文件，選擇編輯方式，選擇sublime編輯。
編輯後保存，自動上傳到伺服器。
推薦使用Transmit
G. append（html）後無法選擇上傳文件
應該是這個插件把input file用其他的button代理了，並且沒有使用未來元素綁定事件。
H. 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')，否則上傳多個文件會混淆。
I. jquery miniui插件中的 mini-htmlfile 怎麼實現文件上傳
怎麼還在用Jquery Miniui啊…那是個坑啊……
算了…雖然坑，但是文件上傳還是跑的起來的嘛
附件文件：<inputclass="mini-htmlfile"name="uploadFile"limitType="*.png;*.jpg;*.xls,*.dwg;*.vsd"/>
<aclass="mini-button"id="blabla"iconCls="blabla">上傳</a>
仔細檢查了一遍…你的代碼沒有錯誤啊…（consule裡面打出來是怎麼樣的）
然後在js裡面，阻止頁面刷新就行了……
event.preventDefault();
J. html上傳圖片怎麼弄
可以將圖片轉base64，也可以直接當成文件上傳。代碼有點多，就不寫了，如果實在不會就找插件吧