js上传文件代码（js上传文件代码是什么）

今天给各位分享js上传文件代码的知识，其中也会对js上传文件代码是什么进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、使用jquery.form.js实现文件上传及进度条前端代码
• 2、原生js实现文件上传
• 3、如何从js文件上传问题，怎么解决
• 4、如何通过js完成多个文件的上传

使用jquery.form.js实现文件上传及进度条前端代码

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。

去掉hidden的class，看到的效果是这样的

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面，绑定方式就随意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以 参考官网

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

        }

如何从js文件上传问题，怎么解决

1

第一步：新建HTML文件

使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。如图：

步骤阅读

2

第二步：写入html页面代码文件

在dreamweaver中输入以下页面代码：

table width="958"

tr

tdpre style="height:2px"                                                              a href=""文件上传/a首页  /td

/tr

/table

h1nbsp;a href="" class="STYLE9"文件上传/aspan class="STYLE7"文件上传/span/h1

pnbsp;/p

div style="width:180px; height:950px; float:left; border: #55AAFF 1px solid"

p文件上传  /p

br /

p上传图片/p

form action="doUpload.jsp" method="post"  name="form1" enctype="multipart/form-data"

!-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传。--

input type="file" name="upfile" size="15"

input type="submit" value="确定"

/form/div

注意，这段代码请放在body标签之类。如图：

3

第三步：写入css样式代码

在head标签之类输入以下样式代码：

style type="text/css"

!--

.STYLE1 {color: #3399FF}

.STYLE7 { font-size: 16px;

font-weight: bold;

}

.STYLE9 {font-family: "华文彩云";

font-size: 48px;

color: #FF0000;

}

.STYLE11 {

font-size: 16px;

color: #FF3300;

}

--

/style

用以固定页面样式。如图：

4

第四步：检测页面样式

用浏览器打开html文件，查看页面样式，然后做修改调整。如图：

5

第五步：选择文件

点击页面左边的选择文件按钮，选中桌面文件，然后点击打开，在页面上会显示文件名称，如图：

6

第六步：上传文件

点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。如图：

如何通过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; ifiles.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上传文件代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js上传文件代码是什么、js上传文件代码的信息别忘了在本站进行查找喔。