第一种：经典的form和input上传。
设置form的aciton为后端页面，enctype="multipart/form-data"，type=‘post’
<form action=';使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。触发form表单提交数据的方式有2种，一种是在页面上点击button按钮或<input
type='submit'>按钮触发，第二种是在js中执行formsubmit()方法。
优点：使用简单方便，兼容性好，基本所有浏览器都支持。
缺点：1 提交数据后页面会跳转（下面会讲如何禁止页面跳转）。
2因为是浏览器发起的请求，不是一个ajax，所以前端无法知道什么时候上传结束。
3 form表单里发送除文件外的数据，一般是新建一个type=hidden的input，value=‘需要传的数据’，每发送一个数据就需要一个input，一旦多了就会使得dom看起来比较冗余。
小技巧：
form表单提交数据后会自动跳转到action指定的页面，为了禁止页面跳转，可以在页面中新建一个空的ifame，比如name='upload'，然后设置form的target="Uploader"，form有一个target的属性，规定在何处打开action，这样form提交数据后就会仍停留在当前页。代码如下：
<form action=';这样写的另一个好处是，可以知道什么时候上传完成并接收到后端的回调结果。比如上面这个例子，文件数据发送到了
'uploadFilephp'，假设该页面处理完数据后返回了一个地址，该地址会被写入到之前的iframe中。所以在ifame的onload函数触发时，也就是上传完成后，可以在iframe中读取到后端返回的数据。
var iframe = documentgetElementById('upload1');iframeonload = function () {
var doc = windowframes['uploader1']document; var pre = docgetElementsByTagName('pre'); var obj = JSONparse(pre[0]innerHTML);
}
使用这种方法时需要注意，iframe有跨域限制，创建出来的iframe的地址如果和当前页面地址不同源，会报错。这种情况下，建议大家在iframe的onload函数中，再次向后端请求一个接口获取文件地址，而不是直接去iframe里读取。或者返回这样的数据。
<script type="text/javascript">windowtopwindow[callback](data)</script>callback是和前端约定好的名字，上传完成后触发该函数并返回后端数据。
第二种：使用formData上传。
用js构造form表单的数据，简单高效，但最低只兼容IE10，所以需要兼容IE9的童鞋们就略过这个方法吧。
html:
<input type='file'>js:
var formData = new FormData();formDataappend("userid", userid);
formDataappend("signature", signature);
formDataappend("file", file); //file是blob数据//再用ajax发送formData到服务器即可，
注意一定要是post方式上传
说明：第一种方法提到了创建多个type=‘hidden’的input来发送签名数据，这儿可以用formDataappend方法来代替该 *** 作，避免了dom中有多个input的情况出现。最后将file数据也append到formData发送到服务器即可完成上传。
优点：由于这种方式是ajax上传，可以准确知道什么时候上传完成，也可以方便地接收到回调数据。
缺点：兼容性差
第三种：使用fileReader读取文件数据进行上传。
HTML5的新api，兼容性也不是特别好，只兼容到了IE10。
var fr = new FileReader();frreadAsDataURL(file);
fronload = function (event) { var data= eventtargetresult; //此处获得的data是base64格式的数据 imgsrc = data;
ajax(url,{data} ,function(){})
}
上面获得的data可以用来实现上传前的本地预览，也可以用来发送base64数据给后端然后返回该数据块对应的地址。
优点： 同第二种
缺点：一次性发送大量的base64数据会导致浏览器卡顿，服务器端接收这样的数据可能也会出现问题。
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URLrevokeObjectURL() 方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
input file在选择完文件之后，他的值就是这个文件在你机器上的路径
js本身是不能去读取这个文件的内容的，比如获取大小，类型之类
你说的功能是属于ajax上传文件，服务器完成上传后返回文件的信息（或者内容），然后再在html上加载出来
这个功能一定要后台来完成
例
上传一个文本文件，input file获取本机路径，上传至服务器，服务器读取文本内容返回文本内容，在html上打印出来
JS读取TXT文件内容的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取文件内容</title>
</head>
<body>
<div id="textarea"></div>
<script type="javascript">
var fso, ts, s ;
var ForReading = 1;
fso = new ActiveXObject("ScriptingFileSystemObject");
ts = fsoOpenTextFile("d:\\testfiletxt", ForReading);
s = tsReadLine();
documentgetElementById("textarea")innerHTML=s;
</script>
</body>
</html>
扩展资料：
javascript中打开文件的OpenTextFile函数使用方法：
1、objectOpenTextFile(filename[, iomode[, create[, format]]])
2、其中object是必选项。 object 应为 FileSystemObject 的名称。
3、filename是必选项。 指明要打开文件的字符串表达式。
4、iomode是可选项。 可以是三个常数之一： ForReading 、 ForWriting 或 ForAppending 。
5、create是可选项。 Boolean 值，指明当指定的 filename 不存在时是否创建新文件。 如果创建新文件则值为 True ，如果不创建则为 False 。 如果忽略，则不创建新文件。
6、format是可选项。 使用三态值中的一个来指明打开文件的格式。 如果忽略，那么文件将以 ASCII 格式打开。
以上就是关于前端上传文件的几种方法全部的内容，包括:前端上传文件的几种方法、前端导出数据为文件、input file 在js里获取文件内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）