【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader

WebUploader基础上的封装改善,一句代码全部实现(样式美化,实例JS优化(配置优化,样式调整,名称+大小显示,错误处理等),后端代码。。。。。)

 效果:(完整demo:https://github.com/dunitian/LoTUploader/tree/V1.0.1/Demo)

一句代码:$.lotuploader('lot-uploader', '/Home/Upload'); //必填参数:ID,Server地址 (完整案例看Demo部分)

第一步:引入样式

<link href="Scripts/lotUploader/lotuploader1.0.1.min.css" rel="stylesheet" />

第二步:自己定义一个DIV(id名任意)

<div id="lot-uploader"></div>

第三步:引入脚本

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="Scripts/lotUploader/lotuploader1.0.1.min.js"></script>

代码部分:

<script type="text/javascript">

$.lotuploader({
  lotDocId: 'lot-uploader', //ID
  lotUrl: '/Home/Upload', //服务器Post地址
});

</script>

单文件处理:

$.lotuploader({ lotDocId: 'lot-uploader', lotUrl: '服务器Post地址', oneFile: true, fileSize: 1024 * 1024 * 5, btnStr: '点我就上传默认展图', lotSuccessFunc: function (file,data) { //方法主体 }, lotErrorFunc: function (msg) { $('#lot-uploader').append('<div class="lot-temp" style="color:red">' + msg + '</div> '); setTimeout(function () { $('.lot-temp').remove(); }, 2000); } });

注意点:

如果你项目并不使用font-awesome,那请吧.upload-state-done:after样式修改一下,这样成功后就很明了

案例没有采用纯Net语法,只是把服务端处理用Net处理了下。index.html部分通用

你可能感兴趣的:(【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】)