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，也可以直接当成文件上传。代码有点多，就不写了，如果实在不会就找插件吧