原生态的ajax如何上传文件,上传文件的两种方式:原生javascript拖拽与jquery

长期以来上传都是在页面放一个input type=file标签，今天发现html5相关的javascript居然可以直接拖拽就可把系统里的文件上传到服务器，当然服务器还需一段接收的java代码。

1.首先在拖拽区域(container)加入drop事件,注册handleDrop函数。var container = document.getElementById("container");

var fileList = document.getElementById("fileList");

container.addEventListener("drop", handleDrop, false);

2.当把文件拖入区域时会触发handleDrop事件，执行ajax上传功能：

function handleDrop(event){

var files = event.dataTransfer.files;

for (var i = 0; i < files.length; i++) {

var file = files[i];

uploadFile(file);

}

}

3.具体的上传代码:

var xhr = new XMLHttpRequest();

var upload = xhr.upload;

upload.addEventListener("progress", uploadProgress, false);

upload.addEventListener("load", uploadSucceed, false);

upload.addEventListener("error", uploadError, false);

xhr.open("POST", "upload.jsp?fileName="+file.name);

xhr.overrideMimeType("application/octet-stream");

//xhr.sendAsBinary(file.getAsBinary());

var fileReader = new FileReader();

var tmp=fileReader.readAsBinaryString(file);

fileReader.οnlοad=function(f){

xhr.sendAsBinary(this.result);

}

jquery上传

html:

　　

选择上传文件

js:

function fileChange(){

$("#fileTypeError").html('');

var fileName = $('#file_upload').val();//获得文件名称

var fileType = fileName.substr(fileName.length-4,fileName.length);//截取文件类型,如(.zip)

if(fileType=='.zip'){//验证文件类型,此处验证也可使用正则

$('.sui-loading').show();

$.ajax({

url: '/uploadImg',//上传地址

type: 'POST',

cache: false,

data: new FormData($('#uploadForm')[0]),//表单数据

processData: false,

contentType: false,

success:function(data){

$('.sui-loading').hide();

if(data.retCode==0){

window.location.href="/controller/setPercent";

}

}

});

}else{

$.alert('*上传文件类型错误,支持类型: .zip');

}

}

上面上传的文件不带参数名，如果要文件的参数名可以这样:

var formData = new FormData();

formData.append('img', $('#file_upload')[0].files[0]);

另外普通参数也可按这种方式传值，比如：formData.append('name', $('input[name='name']").val()); 就是把普通的输入框的值传到服务器。

$.ajax的参数为data:formData

如下三个参数的作用:

//报错'append' called on an object that does not implement interface FormData请加入以下三行

cache: false,

processData: false,

contentType: false,

评论:

提交