博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js文件、图片上传(原生方法和jquery的ajax两种都有)
阅读量:6114 次
发布时间:2019-06-21

本文共 1352 字,大约阅读时间需要 4 分钟。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<input type="file" id="fileUpload">
<button id="submit">点击上传文件</button>

<script src="javascripts/jquery-3.2.1.min.js"></script>//此处需自己引入jquery文件

<script>

 

//方法一:原生ajax上传文件
document.getElementById('submit').onclick = function(){
var file = document.getElementById('fileUpload').files[0];
var formData = new FormData();
formData.append('name','libin');
formData.append('userFile',file);
var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://localhost:3000/formUpload");
// 文件上传完毕的回调
oReq.upload.onloadend = function(e) {
  console.log('接收完成'+e.loaded+'/'+e.total);
}
oReq.send(formData);
 
//方法二:通过jquery的ajax方法上传文件
document.getElementById('submit').onclick = function(){
var file = document.getElementById('fileUpload').files[0];
var formData = new FormData();
formData.append('name','libin');
formData.append('userFile',file);
$.ajax({
  url: 'http://localhost:3000/formUpload',
  data: formData,
  contentType: false,
  processData: false,
  type: 'POST',
  success: function (result) {
    console.log(result);
  },
  error: function (err) {
    console.error(err);
  }
});
}

</script>

</body>

</html>

 

转载于:https://www.cnblogs.com/xuanbingbingo/p/8608873.html

你可能感兴趣的文章
bulk
查看>>
js document.activeElement 获得焦点的元素
查看>>
C++ 迭代器运算
查看>>
【支持iOS11】UITableView左滑删除自定义 - 实现多选项并使用自定义图片
查看>>
day6-if,while,for的快速掌握
查看>>
JavaWeb学习笔记(十四)--JSP语法
查看>>
【算法笔记】多线程斐波那契数列
查看>>
java8函数式编程实例
查看>>
jqgrid滚动条宽度/列显示不全问题
查看>>
在mac OS10.10下安装 cocoapods遇到的一些问题
查看>>
angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
查看>>
css技巧
查看>>
Tyvj 1728 普通平衡树
查看>>
[Usaco2015 dec]Max Flow
查看>>
javascript性能优化
查看>>
多路归并排序之败者树
查看>>
java连接MySql数据库
查看>>
转:Vue keep-alive实践总结
查看>>
android studio修改新项目package名称
查看>>
深入python的set和dict
查看>>