共计 1676 个字符,预计需要花费 5 分钟才能阅读完成。
<input type="file" name="file" id='chooseFile'/>
var form = document.getElementById("chooseFile");
form.addEventListener('change', function(ev) {// 监听 file 控件值的变化
var oData = new FormData();
var file=this.files[0];
// 拼接参数
formData.append('file', file); // 文件
formData.append('params', '参数');
formData.append('array',JSON.stringify([1,2,3]));
var xhr = new XMLHttpRequest();
xhr.open("post",url,true); //post 方式,url 为服务器请求地址,true 该参数规定请求是否异步处理。xhr.upload.onloadstart = function(){// 上传开始
//...
};
xhr.upload.onprogress = function(evt){// 显示上传进度条
var loaded = evt.loaded;// 已经上传大小情况
var tot = evt.total;// 附件总大小
var per = Math.floor(100 * loaded / tot); // 已经上传的百分比
$('#uploadprogress').removeClass('hide').css('width',per+'%');
};
xhr.onload = function (evt) {// 上传完成
//...
};
xhr.onerror = function () {alert('上传失败');
};
xhr.send(oData); // 开始上传,发送 form 数据
}, false);
拖拽上传
<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="请将文件拖拽或直接粘贴到这里"></textarea>
$(".divFile7")[0].ondrop = function (event) {event.preventDefault();// 不要执行与事件关联的默认动作
var files = event.dataTransfer.files;// 获取拖上来的文件
// 以下代码不变
var formData = new FormData();
// 参照上面代码......
};
使用 jqery 上传文件的注意事项
需设置 processData 参数为 false
$.ajax({
url: "/Home/SaveFile2",
type: "POST",
data: formData,
processData: false, // 告诉 jQuery 不要去处理发送的数据
contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头
success: function (responseText) {alert(responseText);
}
});
监听黏贴操作将图片转换为 base64
document.getElementById('messageText').addEventListener('paste',function(e){
var data=e.clipboardData||window.clipboardData;
blob=data.items[0].getAsFile();// 获取图片内容
var isImg=(blob&&1)||-1;// 判断是不是图片,最好通过文件类型判断
var reader=new FileReader();
if(isImg>=0){reader.readAsDataURL(blob);// 将文件读取为 DataURL
}
reader.onload=function(event){// 文件读取完成时触发
//event.target.result 就是我们要的 base64 编码
};
});
正文完
发表至: javascript
2019-05-18