在做之前我们需要先引入两个文件，webuploader.min.js和webuploader.css
html代如下：
<html>
<head>
<script src="js/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/webuploader.css">
</head>
<body>
<div id="img"></div>
<input type="hidden" id="upload_img" name="upload_img" value=""/>
</body>
</html>
js代码如下：
var url = “xxxxxxx”;//服务器的地址
var upload1 = initUpload('upload_card_img',url );//初始化插件
//上传成功后，返回图片的信息
uploadSuccess(upload1,'upload_card_img');
上面是两个方法，整理后可多次重复调用，不用再写重复的代码
方法具体内容如下：
function initUpload(id,url){
var uploader = WebUploader.create({
auto: true,
pick: {
id: '#'+id,
label: '点击选择图片',
multiple: true
},
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
swf: 'js/Uploader.swf',
server: url,
fileVal: "file",
duplicate: true
});
return uploader;
}
function uploadSuccess(upload,id){
upload.on('uploadSuccess', function(file, response) {
if (response.state == 'SUCCESS') {
$("#"+id).html('<img src="'+response.url+'" />');
$("#"+id.substr(7)).val(response.url);
}
});
}
这样前端异步上传图片就完成了，以后可以直接拿来用，（另外upload初始化的时候 ，需要引入一个swf文件，这个可以在webuploader官网下载即可）