var file = document.getElementById("file").files[0]
//原生ajax实现文件上传
var formData = new FormData()
if (file) {
formData.append("file", file)
console.log(file)
}
//得到xhr对象
var xhr = null
if (XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式，url，异步提交
// xhr.setRequestHeader("Content-Type","multipart/form-data")
xhr.onload = function () {
var data = xhr.responseText //得到返回值
console.log(data)
}
xhr.send(formData)
}
方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。html
<p>
<a href='#' onclick='javascript:viewnone(more1)'>添加附件 </a>
<div id='more1' style='display:none'>
<input type="file" name="attach1" size="50"javascript:viewnone(more2)>
</span>
</div>
<div id='more2' style='display:none'>
<input type="file" name="attach2" size="50"'>
</div>
</p>
js
<SCRIPT language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none"
}
</script>
方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>
js
<script type="text/javascript">
var attachname = "attach"
var i=1
function addInput(){
if(i>0){
var attach = attachname + i
if(createInput(attach))
i=i+1
}
}
function deleteInput(){
if(i>1){
i=i-1
if(!removeInput())
i=i+1
}
}
function createInput(nm){
var aElement=document.createElement("input")
aElement.name=nm
aElement.id=nm
aElement.type="file"
aElement.size="50"
//aElement.value="thanks"
//aElement.onclick=Function("asdf()")
if(document.getElementById("upload").appendChild(aElement) == null)
return false
return true
}
function removeInput(nm){
var aElement = document.getElementById("upload")
if(aElement.removeChild(aElement.lastChild) == null)
return false
return true
}
</script>
方式三：动态多文件上传，只是在oFileInput.click()这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！
另外还有一点就是说，click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。
html
<A href="javascript:newUpload()">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>
js
<SCRIPT language="javascript">
//---新建上传
function newUpload(){
var oFileList = document.getElementById("fileList")
var fileCount = oFileList.childNodes.length + 1
var oFileInput = newFileInput("upfile_" + fileCount)
if(selectFile(oFileInput)){
addFile(oFileInput)
}
}
//----选择文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles")
oUploadFiles.appendChild(oFileInput)
oFileInput.focus()
oFileInput.click()//不能这样做，可能是为了安全着想吧！
var fileValue = oFileInput.value
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput)
return false
}
else
return true
}
//---新建一个文件显示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList")
var fileIndex = oFileList.childNodes.length + 1
var oTR = document.createElement("TR")
var oTD1 = document.createElement("TD")
var oTD2 = document.createElement("TD")
oTR.setAttribute("id","file_" + fileIndex)
oTR.setAttribute("bgcolor","#FFFFFF")
oTD1.setAttribute("width","6%")
oTD2.setAttribute("width","94%")
oTD2.setAttribute("align","left")
oTD2.innerText = oFileInput.value
oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ')">删除</A>'
oTR.appendChild(oTD1)
oTR.appendChild(oTD2)
oFileList.appendChild(oTR)
}
//---移除上传的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex)
var oTR= document.getElementById("file_" + fileIndex)
uploadFiles.removeChild(oFileInput)
fileList.removeChild(oTR)
}
//---创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("INPUT")
oFileInput.type = "file"
oFileInput.id = _name
oFileInput.name = _name
oFileInput.size="50"
//oFileInput.setAttribute("id",_name)
//oFileInput.setAttribute("name",_name)
//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>'
//alert(oFileInput.outerHTML)
return oFileInput
}
</SCRIPT>
1
第一步：新建HTML文件
使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。如图：
步骤阅读
2
第二步：写入html页面代码文件
在dreamweaver中输入以下页面代码：
<table width="958">
<tr >
<td><pre style="height:2px"> <a href="http://www.bjqipei315.com/">文件上传</a>首页 </td>
</tr>
</table>
<h1> <a href="http://www.bjqipei315.com/" class="STYLE9">文件上传</a><span class="STYLE7">文件上传</span></h1>
<p> </p>
<div style="width:180pxheight:950pxfloat:leftborder: #55AAFF 1px solid">
<p>文件上传 </p>
<br />
<p>上传图片</p>
<form action="doUpload.jsp" method="post" name="form1" enctype="multipart/form-data">
<!-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传。-->
<input type="file" name="upfile" size="15">
<input type="submit" value="确定">
</form></div>
注意，这段代码请放在<body>标签之类。如图：
3
第三步：写入css样式代码
在<head>标签之类输入以下样式代码：
<style type="text/css">
<!--
.STYLE1 {color: #3399FF}
.STYLE7 { font-size: 16px
font-weight: bold
}
.STYLE9 {font-family: "华文彩云"
font-size: 48px
color: #FF0000
}
.STYLE11 {
font-size: 16px
color: #FF3300
}
-->
</style>
用以固定页面样式。如图：
4
第四步：检测页面样式
用浏览器打开html文件，查看页面样式，然后做修改调整。如图：
5
第五步：选择文件
点击页面左边的选择文件按钮，选中桌面文件，然后点击打开，在页面上会显示文件名称，如图：
6
第六步：上传文件
点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。如图：
