js点击上传文件
❶ js如何上传文件
js采用File API 来上传文件的。
File API 由一组 javaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … /> 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。
File API 简单示例
<body>
<h1>File API Demo</h1>
<p>
<!-- 用于文件上传的表单元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
运行效果：
❷ 如何通过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);
}
❸ 使用js向服务器上传文件
（1）js无法向网站服务器传送文件只能用FTP传送文件，（2）是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库，数据，相应单位，通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.
❹ 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中上传文件中的选择按钮为什么总消失
你这个虽然能做是能做 但是不简单。
点击某个按钮 弹出file框到很简单
如
function a() {
document.getElementById('ff').click();
}
<div onclick="a()">bbbb</div>
<input type="file" id="ff" />
这个代码就可以实现
但是 虽然点击别处 激活 file 的点击事件 弹出了选择要上传的操作框
但是 你选择某个图片之后 点击上传之后 你会发现 没有任何资源被上传
一般浏览器都会拒绝 除了正常途径以外的 其他任何方式给file 赋值 说是为了安全。
要屏蔽这种限制的话 只能在网络或谷歌里 疯狂搜索了。
我之前为了想模拟 file 因为他太难看 最后还是没解决。只好用了第三方插件
flash 上传的 ~ 建议你还是别在这里下功夫了 ~ 跟我一样会白费功夫
❻ 如何从js文件上传问题，怎么解决
1
第一步：新建HTML文件
使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。如图：
❼ js文件上传选择文件后如何把文件名称返显
打开出现问题的目录，比如D盘下的文件夹名称/文字不能显示，就打开D盘。
后退至上一个文件夹，即不能显示名称的文件夹位置，只能通过“后退”按钮，不能点击地址栏上该文件夹的位置（键盘快捷键未测试）。
❽ 如何在角JS开始上传文件
调用方法 HTML代码：
<script type="text/javascript" src="CFUpdate.min.js" charset="utf-8"></script>
<div id="cfupdate" ></div>
主要配置参数的文件（Config.js）代码
function challs_flash_update(){ //初始化函数
var a={};
//定义变量为Object 类型
a.title = "上传文件"; //设置组件头部名称
a.FormName = "Filedata";
//设置Form表单的文本域的Name属性
a.url = "update.php";
//设置服务器接收代码文件
a.parameter = "";
//设置提交参数，以GET形式提交,例："key=value&key=value&..."
a.typefile = "*.gif;*.png;*.jpg;*.jpeg;*.avi;";
//设置可以上传文件 数组类型
//"*.gif;*.png;*.jpg"为文件扩展名列表，其中列出用户选择要上载的文件时可以看到的 Windows 文件格式，以分号相隔
a.UpSize = 0;
//可限制传输文件总容量，0或负数为不限制，单位MB
a.fileNum = 0;
//可限制待传文件的数量，0或负数为不限制
a.size = 2048;
//上传单个文件限制大小，单位MB，可以填写小数类型
a.FormID = ['select','select2'];
//设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
//需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
//参数为数组类型，注意使用此参数必须有 challs_flash_FormData() 函数支持
a.autoClose = 1;
//上传完成条目，将自动删除已完成的条目，值为延迟时间，以秒为单位，当值为 -1 时不会自动关闭，注意：当参数CompleteClose为false时无效
a.CompleteClose = true;
//设置为true时，上传完成的条目，将也可以取消删除条目，这样参数 UpSize 将失效, 默认为false
a.repeatFile = true;
//设置为true时，可以过滤用户已经选择的重复文件，否则可以让用户多次选择上传同一个文件，默认为false
a.MD5File = 1;
//设置MD5文件签名模式，参数如下 ,注意：对大文件计算时会很慢,在无特殊需要时，请设置为0
//0为关闭MD5计算签名
//1为直接计算MD5签名后上传
//2为计算签名，将签名提交服务器验证，在根据服务器反馈来执行上传或不上传
//3为先提交文件基本信息，根据服务器反馈，执行MD5签名计算或直接上传，如果是要进行MD5计算，计算后，提交计算结果，在根据服务器反馈，来执行是否上传或不上传
a.loadFileOrder=true;
//选择的文件加载文件列表顺序，TRUE = 正序加载，FALSE = 倒序加载
a.mixFileNum=0;
//至少选择的文件数量，设置这个将限制文件列表最少正常数量（包括等待上传和已经上传）为设置的数量，才能点击上传，0为不限制
a.ListShowType = 1;
//文件列表显示类型：
//1 = 传统列表显示，
//2 = 缩略图列表显示（适用于图片专用上传）
//5 = 极简模式
//6 = 手机模式（适用于手机平板）
//
//3,4（保留暂无效果）
a.TitleSwitch = true;
//是否显示组件头部
a.ForceFileNum = 0;
//强制条目数量，已上传和待上传条目相加等于为设置的值（不包括上传失败的条目），否则不让上传, 0为不限制，设置限制后mixFileNum,autoClose和fileNum属性将无效！
a.autoUpload = false;
//设置为true时，用户选择文件后，直接开始上传，无需点击上传，默认为false;
a.adjustOrder = true;
//设置为true时，用户可以拖动列表，重新排列位置
a.deleteAllShow = true
//设置是否显示，全部清除按钮
a.countData = true;
//是否向服务器端提交组件文件列表统计信息，POST方式提交数据
//access2008_box_info_max 列表总数量
//access2008_box_info_upload 剩余数量 （包括当前上传条目）
//access2008_box_info_over 已经上传完成数量 （不包括当前上传条目)
a.isShowUploadButton = true;
//是否显示上传按钮，默认为true
a.isRotation = true;
//是否可旋转图片
//此项只有在缩略图模式下才有用
//开启此项会POST一个图片角度到服务器端，由服务器端旋转图片
//access2008_image_rotation 角度 0 到 -360
a.isErrorStop = true;
//遇见错误时，是否停止上传，如果为false时，忽略错误进入下一个上传
return a ;
//返回Object
}
function challs_flash_style(){ //组件颜色样式设置函数
var a = {};
/* 整体背景颜色样式 */
a.backgroundColor=['#f6f6f6','#f3f8fd','#dbe5f1']; //颜色设置，3个颜色之间过度
a.backgroundLineColor='#5576b8'; //组件外边框线颜色
a.backgroundFontColor='#066AD1'; //组件最下面的文字颜色
a.backgroundInsideColor='#FFFFFF'; //组件内框背景颜色
a.backgroundInsideLineColor=['#e5edf5','#34629e']; //组件内框线颜色，2个颜色之间过度
/* 头部颜色样式 */
a.Top_backgroundColor=['#e0eaf4','#bcd1ea']; //颜色设置，数组类型，2个颜色之间过度
a.Top_fontColor='#245891'; //头部文字颜色
/* 按钮颜色样式 */
a.button_overColor=['#FBDAB5','#f3840d']; //鼠标移上去时的背景颜色，2个颜色之间过度
a.button_overLineColor='#e77702'; //鼠标移上去时的边框颜色
a.button_overFontColor='#ffffff'; //鼠标移上去时的文字颜色
a.button_outColor=['#ffffff','#dde8fe']; //鼠标离开时的背景颜色，2个颜色之间过度
a.button_outLineColor='#91bdef'; //鼠标离开时的边框颜色
a.button_outFontColor='#245891'; //鼠标离开时的文字颜色
/* 滚动条样式 */
a.List_scrollBarColor=0x000000; //滚动条颜色
a.List_scrollBarGlowColor=0x34629e; //滚动条阴影颜色
/* 文件列表样式 */
a.List_backgroundColor='#EAF0F8'; //列表背景色
a.List_fontColor='#333333'; //列表文字颜色
a.List_errFontColor='#ff0000'; //列表错误信息文字颜色
a.List_LineColor='#B3CDF1'; //列表分割线颜色
a.List_cancelOverFontColor='#ff0000'; //列表取消文字移上去时颜色
a.List_cancelOutFontColor='#D76500'; //列表取消文字离开时颜色
a.List_progressBarLineColor='#B3CDF1'; //进度条边框线颜色
a.List_progressBarBackgroundColor='#D8E6F7'; //进度条背景颜色
a.List_progressBarColor=['#FFCC00','#FFFF00']; //进度条进度颜色，2个颜色之间过度
/* 错误提示框样式 */
a.Err_backgroundColor='#C0D3EB'; //提示框背景色
a.Err_fontColor='#245891'; //提示框文字颜色
a.Err_shadowColor='#000000'; //提示框阴影颜色
/* 手机模式专用样式 （ListShowType = 6）*/
a.phone_backgroundColor = "#232323"; //手机模式背景色
a.phone_backgroundFontColor = "#f6f6f6"; //手机模式字体颜色
a.phone_top_font = 20; //手机模式头部文字大小
a.phone_button_font = 18; //手机模式按钮文字大小
a.phone_button_lineColor = "#2e2e2e"; //手机模式按钮边线色1
a.phone_button_default_color = "#232323"; //手机模式按钮默认背景色
a.phone_button_default_fontColor = "#f6f6f6"; //手机模式按钮默认字色
a.phone_button_click_color = "#265259"; //手机模式按钮点击时背景色
a.phone_button_click_fontColor = "#f6f6f6"; //手机模式按钮点击时字色
a.phone_backgroundInsideColor = "#2e2e2e"; //手机模式内框背景颜色
a.phone_List_backgroundColor = "#232323"; //手机模式列表背景色
a.phone_List_progressBarBackgroundColor = "#166549"; //手机模式列表进度条颜色
a.phone_List_name_font = 24; //手机模式列表文件名字体大小
a.phone_List_name_color = "#fff"; //手机模式列表文件名字体颜色
a.phone_List_type_font = 18; //手机模式列表状态字体大小
a.phone_List_type_color = "#eee"; //手机模式列表状态字体颜色
a.phone_List_Button_del_backgroundColor = "#e76e66"; //手机模式列表删除按钮背景色
a.phone_List_Button_del_off_backgroundColor = "#666"; //手机模式列表删除按钮禁用下的背景色
a.phone_List_Button_del_font = 20; //手机模式列表删除按钮文本大小
a.phone_List_Button_del_color = "#fff"; //手机模式列表删除按钮文本颜色
return a;
}
function challs_flash_language(){ //组件文字设置函数
var a = {
// $[1]$ $[2]$ $[3]$是替换符号
// \n 是换行符号
//按钮文字
ButtonTxt_1:'停 止',
ButtonTxt_2:'选择文件',
ButtonTxt_3:'上 传',
ButtonTxt_4:'清空',
ButtonTxt_5:'删 除',
//全局文字设置
Font:'宋体',
FontSize:12,
//提示文字
Alert_1:'初始化错误：\n\n没有找到 JAVASCRITP 函数 \n函数名为 challs_flash_update()',
Alert_2:'初始化错误：\n\n函数 challs_flash_update() 返回类型必须是 "Object" 类型',
Alert_3:'初始化错误：\n\n没有设置上传路径地址',
Alert_4:'添加上传文件失败，\n\n不可以在添加更多的上传文件!',
Alert_5:'添加上传文件失败，\n\n等待上传文件列表只能有$[1]$个，\n请先上传部分文件!',
Alert_6:'提示信息：\n\n请再选择$[1]$个上传文件！',
Alert_7:'提示信息：\n\n请至少再选择$[1]$个上传文件！',
Alert_8:'请选择上传文件！',
Alert_9:'上传错误：\n\n$[1]$',
//界面文字
Txt_5:'等待上传',
Txt_6:'等待上传：$[1]$个 已上传：$[2]$个',
Txt_7:'字节',
Txt_8:'总量限制（$[1]$MB）,上传失败',
Txt_9:'文件超过$[1]$MB,上传失败',
Txt_10:'秒',
Txt_11:'保存数据中...',
Txt_12:'上传完毕',
Txt_13:'文件加载错误',
Txt_14:'扫描文件...',
Txt_15:'验证文件...',
Txt_16:'取消',
Txt_17:'无图',
Txt_18:'加载中',
Txt_20:'关闭',
Txt_21:'确定',
Txt_22:'上传文件',
//错误提示
Err_1:'上传地址URL无效',
Err_2:'服务器报错：$[1]$',
Err_3:'上传失败,$[1]$',
Err_4:'服务器提交效验错误',
Err_5:'效验数据无效错误'
};
//英文
// var a = {
// ButtonTxt_1:'Stop',
// ButtonTxt_2:'Add file',
// ButtonTxt_3:'Upload',
// ButtonTxt_4:'Empty',
// Font:'Arial',
// FontSize:12,
// Alert_1:'Initialization error：\n\nJAVASCRITP function not found \nthe name of the function is challs_flash_update()',
// Alert_2:'Initialization error：\n\nfunction challs_flash_update() return type must be "Object"',