运用webuploder实现无刷新图片上传实例
1、引入js、css文件

2、view视图:
<div class="form-group" id="imgSize">
<label>文件上传</label>
<div class="demo">
<!--<input class="form-control" name="img" type='file' placeholder="请上传文章首页图片">-->
<div class="upload-image-list clearfix">
<div class="fileinput-button js-add-image"onclick="addWebuploadCurrent($(this))">
<span class="cover_words">正面</span>
<div class="webuploader-pick">
<a class="fileinput-button-icon" href="javascript:;"></a>
</div>
</div>
</div>
</div>
</div>



3、js部分
<script type="text/javascript" src="__PUBLIC__/ajaxuplode/jquery.js"></script>
<link href="__PUBLIC__/ajaxuplode/uplode.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
webupload_pic();
})
function webupload_pic() {
var maxsize = 5000;
$.getscript("__PUBLIC__/ajaxuplode/Public/js/plugins/webuploader/webuploader.js", function() {
if (!WebUploader.Uploader.support()) {
alert('您的浏览器不支持上传功能！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
}
var uploader = WebUploader.create({
multiple: false,
auto: true,
swf: "/Public/ajaxuplode/Public/js/plugins/webuploader/Uploader.swf",
server: "{:U('Admin/Article/uplode')}", //1、服务器处理路径
pick: {
id: '.js-add-image',
innerHTML: ''
},
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/*'
},
fileSingleSizeLimit: maxsize * 1024 * 1024,
duplicate: true,
formData: {
code: 'identity',
}

});
//上传时
uploader.on('fileQueued', function(file) {
var item_progress = "<div class='progress' id='" + file['id'] + "'><span class='bar'></span><span class='percent'>0%</span></div></li>";
$(".webupload_current").prepend(item_progress);

});
//上传中
uploader.on('uploadProgress', function(file, percentage) {
var percent = parseFloat(percentage * 100);
$("#" + file.id).find('.bar').css({"width": percent + "%"});
$("#" + file.id).find(".percent").text(percent + "%");

});

uploader.on('uploadBeforeSend', function(block, data) {
data.maxsize = maxsize;
});
//上传成功后
uploader.on('uploadSuccess', function(file, response) {
//2、response.pic 返回的图片路径名称

$("#" + file.id).remove();
$(".webupload_current").prepend("<img class='img_common' src="+ response.pic + " data-pic=" + response.pic + " alt='身份证照片'/>")
});

uploader.on('uploadError', function(file, reason) {

alert("上传失败！请重试。");
});
});
}

function addWebuploadCurrent(obj) {
$(".webupload_current").removeClass("webupload_current");
obj.addClass("webupload_current");
}
3、控制器部分

ajaxuplode.rar ( 226.02 KB 下载：297 次 )