<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编码
};
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。