当前位置:首页 » 文件管理 » javascript上传文件

javascript上传文件

发布时间: 2022-12-23 03:09:18

Ⅰ 原生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", "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);

        }

javascript 上传文件到阿里云的oss,上传文件成功后怎么获取文件的真实路径

如果你直接使用 javascript 将阿里云的accessId、accessKey写在页面上是不安全的,你可以使用后台存储这些敏感的信息,官网有相关的SDK ,你可以选择你常用的。

在后台编写你的回调函数,将回调函数凭证信息返回给前端,前端使用回调函数凭证访问OSS,就可以获取到回调函数信息。

Ⅲ JS-超大文件上传-如何上传文件-大文件上传

可以试试这样

  1. 前端通过 input type = "file" 接收文件

  2. 然后使用文件的 slice 的方法对文件进行分片

  3. 将每一片提交到后台依次提交到后台,提交时通过 formData 提交,添加几个字段

    (1). 这次上传文件的惟一 id

    (2). 上传的状态,是开始,还是上传中,还是上传结束

    (3). 分片的位置,比如是第一片,第二片

    (4). 分片的数据

  4. 后端当接收到一个文件 id 的结束标识时,把对应的分片按位置数据拼接起来就行

Ⅳ 使用js向服务器上传文件

(1)js无法向网站服务器传送文件只能用ftp传送文件,(2)是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库,数据,相应单位,通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.

Ⅳ 如何用javascript实现<img>控件的图片上传

fileupload(前台id:fleupld)控件加一个onclick方法:getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
获取的是fileupload中文件的全路径,当然你可以截取这个值,获得其子字符串(单个文件的名称)。

Ⅵ 如何使用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;
}

Ⅶ 前端上传文件的几种方法

1.表单上传

最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的。

form表单上传

表单上传需要注意以下几点:

(1).提供form表单,method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群:453833554

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值:

application/x-www-form-urlencoded:在发送前编码所有字符(默认)(空格被编码为’+’,特殊字符被编码为ASCII十六进制字符)。

multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

text/plain:空格转换为 “+” 加号,但不对特殊字符编码。

默认enctype=application/x-www-form-urlencoded,所以表单的内容会按URL规则编码,然后根据表单的提交方法:

method=’get’ 编码后的表单内容附加在请求连接后,

method=’post’ 编码后的表单内容作为post请求的正文内容。

Ⅷ 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开始上传文件

调用方法 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"',

Ⅹ 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>

热点内容
编程让我着迷 发布:2025-08-21 05:22:28 浏览:763
80d怎么看存储 发布:2025-08-21 05:21:39 浏览:336
刺激战场国际服安卓怎么登不了 发布:2025-08-21 05:14:01 浏览:15
混沌序列加密图像 发布:2025-08-21 04:54:21 浏览:955
从哪里找微博登录密码 发布:2025-08-21 04:32:34 浏览:444
java输出三角形 发布:2025-08-21 04:31:43 浏览:703
压缩阻抗 发布:2025-08-21 03:52:28 浏览:435
javaopenssl加密 发布:2025-08-21 03:46:51 浏览:553
传智php培训 发布:2025-08-21 03:46:45 浏览:510
我的世界如何在服务器检查自己在线时间 发布:2025-08-21 03:45:28 浏览:466