layui上传照片

项目需要上传照片的功能  并且还需要带参数过去  所以我就在官方文档里找了哈  代码都有的  

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>

    <link href="~/layui-v2.2.45/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>xxx上传</legend>
    </fieldset>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
    <input type="hidden" id="aa" name="xxxx" value="@ViewBag.xxxx" />
    <script src="~/layui-v2.2.45/layui/layui.js"></script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
          , upload = layui.upload;  //特别注意  这里的两个参数必须要  不然的话  js会报错  一开始没注意 找了好久
            upload.render({
           elem: '#test2'
           , accept:"file"
           , url: 'xxxx?batchnumber=' + $("#aa").val()
           , multiple: true


           , before: function (obj) {
               //预读本地文件示例，不支持ie8
               obj.preview(function (index, file, result) {
                   $('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
               });
           }
           , Alldone: function (res) {     //done是单个上传完就执行回调  Alldone是全部上传完了才执行回调  后面才发现  入了一个很大的坑
               if (res) {

window.parent.location.reload();//刷新父级页面
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

               }
           }
            });
        });
    </script>
</body>
</html>

后台用常规的方法接受就行了  

对于我这种菜鸟程序员来说  今天收获很大  哈哈哈

posted @ 2017-12-25 18:41  一头笨熊  阅读(4392)  评论(0)    收藏  举报