javascript上传文件,js 上传文件

JavaScript文件分片上传,断点续传如何实现？

public class FileInf {

public FileInf(){}

public String id="";

public String pid="";

public String pidRoot="";

/** * 表示当前项是否是一个文件夹项。 */

public boolean fdTask=false;

// /// 是否是文件夹中的子文件 /// /summary

public boolean fdChild=false;

/** * 用户ID。与第三方系统整合使用。 */

public int uid=0;

/** * 文件在本地电脑中的名称 */

public String nameLoc="";

/** * 文件在服务器中的名称。 */

public String nameSvr="";

/** * 文件在本地电脑中的完整路径。示例：D:\Soft\QQ2012.exe */

public String pathLoc="";

/** * 文件在服务器中的完整路径。示例：F:\\ftp\\uer\\md5.exe */

public String pathSvr="";

/** * 文件在服务器中的相对路径。示例：/www/web/upload/md5.exe */

public String pathRel="";

/** * 文件MD5 */

public String md5="";

/** * 数字化的文件长度。以字节为单位，示例：120125 */

public long lenLoc=0;

/** * 格式化的文件尺寸。示例：10.03MB */

public String sizeLoc="";

/** * 文件续传位置。 */

public long offset=0;

/** * 已上传大小。以字节为单位 */

public long lenSvr=0;

/** * 已上传百分比。示例：10% */

public String perSvr="0%";

public boolean complete=false;

public Date PostedTime = new Date();

public boolean deleted=false;

/** * 是否已经扫描完毕，提供给大型文件夹使用，大型文件夹上传完毕后开始扫描。 */

public boolean scaned=false;

}

几种js实现的动态多文件上传

方式一：事先写好多个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(i0){

var attach = attachname + i ;

if(createInput(attach))

i=i+1;

}

}

function deleteInput(){

if(i1){

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

egg.js 文件上传

小文件的话就不需要使用文件流了

需要在config.default.ts(egg.js修改默认配置的文件)指定文件的限制

一般来说超过1mb的文件，在上传的时候最好以流的形式去处理

egg.js中也提供的这类的插件

同样的需要修config.default.ts文件，去限制文件的最大长度，如果不限制的话会默认是100kb的，这个要注意

原生js实现文件上传

function saveUser() {

            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", "", true);//设置提交方式，url，异步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data");

            xhr.onload = function () {

                var data = xhr.responseText;    //得到返回值

                console.log(data);

            }

            xhr.send(formData);

        }