导航:首页 > 版本升级 > js实现文件的上传

js实现文件的上传

发布时间:2021-02-23 20:18:08

『壹』 转<几种js实现的动态多文件上传>

也就是说上传的最大个数是写死了的。
html<p<ahref='#'onclick='javascript:viewnone(more1)'添加附件</a<divid='more1'style='display:none'<inputtype="file"name="attach1"size="50"javascript:viewnone(more2)</span</div<divid='more2'style='display:none'<inputtype="file"name="attach2"size="50"'</div</pjs<SCRIPTlanguage="javascript"functionviewnone(e){
e.style.display=(e.style.display=="none")?"":"none";}</script
方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看codehtml<inputtype="button"name="button"value="添加附件"onclick="addInput()"<inputtype="button"name="button"value="删除附件"onclick="deleteInput()"<spanid="upload"</spanjs<scripttype="text/javascript"varattachname="attach";vari=1;functionaddInput(){if(i0){varattach=attachname+i;if(createInput(attach))i=i+1;}}functiondeleteInput(){if(i1){i=i-1;if(!removeInput())i=i+1;}}functioncreateInput(nm){varaElement=document.createElement("input");aElement.name=nm;aElement.id=nm;aElement.type="file";aElement.size="50";//aElement.value="thanks";//aElement.on
click=Function("asdf()");if(document.getElementById("upload"
).appendChild(aElement)==null)returnfalse;returntrue;}functionremoveInput(nm){varaElement=document.getElementById("upload");if(aElement.removeChild(aElement.lastChild)==null)returnfalse;returntrue;}</script
方式三:动态多文件上传,只是在oFileInput.click();这个地方,这样做就不能上传这个文件了,因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧!
另外还有一点就是说,click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传,但还是留下来参考,看看是否有人可以真正实现上传。

『贰』 如何通过原生JS和jQuery版实现文件上传功能

代码

<?php

if (isset($_POST['upload'])) {
var_mp($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
?>

『叁』 如何让javascript实现上传文件呢

ajax 不能上传文件,可以用很多变通的方法解决。

『肆』 几种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>

『伍』 js超大文件上传如何实现

利用File文件接口将文件切成顺序的若干小片,然后上传到服务器,全部上传完后由服务端进行合并和校验

『陆』 js 大文件分片上传处理如何实现

推荐采用webuploader控件来解决。
关于WebUploader的功能说明:
大文件上传续传
支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。
分片、并发
分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。
网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。
解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。
多途径添加文件
支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。上传本地指定路径的文件,不需要通过点击按钮选择文件。
粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。而且支持IE6,IE8浏览器。
同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。
基于内存映射模式进行IO操作,充分发挥操作系统性能。
MD5秒传
当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。
如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。
易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。
采用AMD规范组织代码,清晰明了,方便高级玩家扩展。

『柒』 纯js怎么实现上传文件的功能

||html:<input type="file" id="test-file-upload">

js:
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!回filename ||答 !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}

『捌』 js 文件上传

你说呢?
首先,暂且不讨论他能不能上传
我们假设他能上传
js和html都是客户端语言,也就内是说,由客户端的浏容览器执行的
假设他有上传功能,那么,是不是这样的一个情况呢,就是用户点击他自己电脑上的文件,上传到他自己电脑上
那么,上传不上传,文件都还是在用户的电脑上,那还上传他干嘛啊?

『玖』 js编辑文本 上传为文件 怎么实现

到后复台制在专为文件即可

$.ajax({
url:"a.php?text=wfhjadbfjsahfwqfbadbn&filename=aaa.txt"

});

a.php

<?

content = $_GET['text'];

$file1 = $_GET['filename'].'txt';

$fp = fopen($file1, 'w');

fwrite($fp, $content);

fclose($fp);

?>

『拾』 js 如何实现线程上传文件

js上传?????

一般来讲,上传的文件超过百M,都需要插件了,但几十M就很卡,要么程序写的有问题,要么你的机器有问题。

楼主去试试人家的网盘上传,看看自己的机器卡不卡~

阅读全文

与js实现文件的上传相关的资料

热点内容
日本欧美推理片电影 浏览:239
微信下载文件 浏览:122
死亡数据都有哪些 浏览:986
视频工具下载 浏览:409
李小璐天欲哪一段 浏览:303
qq免费视频群 浏览:222
#羽贺そら美 浏览:436
最新观看地址推荐 浏览:557
巩俐演的电影有个男孩叫水生 浏览:412
电影按摩椅 浏览:212
看b片网址 浏览:869
姜银慧全部5部影片 浏览:64
电脑上免费看电影的网站。 浏览:534
女尊重生一对一 浏览:844
看门狗的文件在哪里 浏览:685
蓝牙模块苹果用什么app 浏览:62
linuxudphttp 浏览:228
美国两个小孩亲嘴的电影 浏览:341
十三岁男孩心入女勾交的小电影日本电影 浏览:706
锯齿win10 浏览:633

友情链接