javascript文件上传
㈠ 后缀名为“.js”的文件要到那里上传，怎么上传
后缀名
为js的文件是
javascript
的文件，和其它.htm.jsp.asp文件一样，用cuteftp等上传工具直接传到服务器上，和别的文件处理方式没什么区别的。
㈡ 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;
}
㈢ 如何使用javascript限制文件上传大小
$("#ms_upload_file").change(function(){
//检验非空和文件大小
if($(this).val() !== '' && checkSize(this)) { //其他操作
}
});/**
* 函数：检查上传文件大小
* 输入：input的js对象
* 输出：
**/function checkSize(input) {
var Sys = {}; var flag; var filesize = 0; //判断浏览器种类
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie=true;
} if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true;
} //获取文件大小
if (Sys.firefox) {
filesize = input.files[0].size;
} else if (Sys.ie){ var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//获取上传文件的对象
var file = fileobject.GetFile (input.value);//获取上传的文件
filesize = file.Size;//文件大小
} //判断是否符合要求
if (filesize / (1024 * 1024) < 5 ) {
flag = true;
} else {
alert("附件过大，建议不要超过5M！");
flag = false;
} return flag;
}
㈣ 如何用javascript实现<img>控件的图片上传
fileupload(前台id：fleupld)控件加一个onclick方法：getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
获取的是fileupload中文件的全路径，当然你可以截取这个值，获得其子字符串（单个文件的名称）。
㈤ 几种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(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>
㈥ JavaScript 大文件分片上传处理如何实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>upload</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="file" name="file" id="file"> <button id="upload" onClick="upload()">upload</button> <script type="text/javascript"> var bytesPerPiece = 1024 * 1024; // 每个文件切片大小定为1MB . var totalPieces; //发送请求 function upload() { var blob = document.getElementById("file").files[0]; var start = 0; var end; var index = 0; var filesize = blob.size; var filename = blob.name; //计算文件切片总数 totalPieces = Math.ceil(filesize / bytesPerPiece); while(start < filesize) { end = start + bytesPerPiece; if(end > filesize) { end = filesize; } var chunk = blob.slice(start,end);//切割文件 var sliceIndex= blob.name + index; var formData = new FormData(); formData.append("file", chunk, filename); $.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { }); start = end; index++; } } </script> </body> </html>
㈦ 求JavaScript怎么实现web端上传超大文件
借助js的Blob对象FormData对象可以实现大文件分片上传的功能，关于Blob和FormData的具体使用方法可以到如下地址去查看网页链接网页链接
㈧ 求JavaScript文件夹上传解决方案
所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。
二、Range
用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式：
Range:用于客户端到服务端的请求，可以通过改字段指定下载文件的某一段大小及其单位，字节偏移从0开始。典型格式：
Ranges: (unit=first byte pos)-[last byte pos]
Ranges: bytes=4000- 下载从第4000字节开始到文件结束部分
Ranges: bytes=0~N 下载第0-N字节范围的内容
Ranges: bytes=M-N 下载第M－N字节范围的内容
Ranges: bytes=-N 下载最后N字节内容
1.以下几点需要注意：
(1)这个数据区间是个闭合区间，起始值是0，所以“Range: bytes=0-1”这样一个请求实际上是在请求开头的2个字节。
(2)“Range: bytes=-200”，它不是表示请求文件开始位置的201个字节，而是表示要请求文件结尾处的200个字节。
(3)如果last byte pos小于first byte pos，那么这个Range请求就是无效请求，server需要忽略这个Range请求，然后回应一个200，把整个文件发给client。
(4)如果last byte pos大于等于文件长度，那么这个Range请求被认为是不能满足的，server需要回应一个416，Requested range not satisfiable。
2.示例解释：
表示头500个字节：bytes=0-499
表示第二个500字节：bytes=500-999
表示最后500个字节：bytes=-500
表示500字节以后的范围：bytes=500-
第一个和最后一个字节：bytes=0-0,-1
同时指定几个范围：bytes=500-600,601-999
三、Content-Range
用于响应头，指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。一般格式：
Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]
四、Header示例
请求下载整个文件:
GET /test.rar HTTP/1.1
Connection: close
Host: 116.1.219.219
Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头
一般正常回应
HTTP/1.1 200 OK
Content-Length: 801
Content-Type: application/octet-stream
Content-Range: bytes 0-800/801 //801:文件总大小
一个最简单的断点续传实现大概如下：
1.客户端下载一个1024K的文件，已经下载了其中512K
2. 网络中断，客户端请求续传，因此需要在HTTP头中申明本次需要续传的片段：
Range:bytes=512000-
这个头通知服务端从文件的512K位置开始传输文件
3. 服务端收到断点续传请求，从文件的512K位置开始传输，并且在HTTP头中增加：
Content-Range:bytes 512000-/1024000
并且此时服务端返回的HTTP状态码应该是206，而不是200。
但是在实际场景中，会出现一种情况，即在终端发起续传请求时，URL对应的文件内容在服务端已经发生变化，此时续传的数据肯定是错误的。如何解决这个问题了？显然此时我们需要有一个标识文件唯一性的方法。在RFC2616中也有相应的定义，比如实现Last-Modified来标识文件的最后修改时间，这样即可判断出续传文件时是否已经发生过改动。同时RFC2616中还定义有一个ETag的头，可以使用ETag头来放置文件的唯一标识，比如文件的MD5值。
终端在发起续传请求时应该在HTTP头中申明If-Match 或者If-Modified-Since 字段，帮助服务端判别文件变化。
另外RFC2616中同时定义有一个If-Range头，终端如果在续传是使用If-Range。If-Range中的内容可以为最初收到的ETag头或者是Last-Modfied中的最后修改时候。服务端在收到续传请求时，通过If-Range中的内容进行校验，校验一致时返回206的续传回应，不一致时服务端则返回200回应，回应的内容为新的文件的全部数据。
㈨ 如何让javascript实现上传文件呢
javascript只能做用文件控件做前台页面把文件提交网站，保存还得网站后台处理
㈩ 如何通过js完成多个文件的上传
HTML5 file组件的新属性
accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件
HTML5 页面代码修改后
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
" , 文件类型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
//上传失败
function uploadFailed(evt) {
alert("上传失败");
}
progress：在接收相应期间持续不断触发。
对应上传进度方法：onprogress()
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//监听事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
xhr.open("POST", "upload");
//记得加入上传数据formData
xhr.send(formData);
}