js文件、图片上传（原生方法和jquery的ajax两种都有）

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

//方法一：原生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

js文件、图片上传（原生方法和jquery的ajax两种都有）相关推荐

upload.js 文件图片上传
//isImgControl:缩略图片大小是否控制 //isYin:是否加水印 var isImgtemp;function uploadImgControlAndYin(isControl){isI ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
通过前两篇姿势的入门 Retrofit 2.0 超能实践,完美支持Https传输 Retrofit2.0 完美同步Cookie实现免登录本文出自:http://blog.csdn.net/sk719 ...
Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...
前端js实现图片上传
前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...
使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法
近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中 ...
文件图片上传及少许正则校验
文件 & 图片上传及少许正则校验 <template><div style="padding: 20px"><Row><Col ...

js文件、图片上传（原生方法和jquery的ajax两种都有）

js文件、图片上传（原生方法和jquery的ajax两种都有）相关推荐

最新文章

热门文章