simple-yewu/frontend/views/finance/car-update-frame.php

<?php
use \common\libs\MyLib;
?>
<?php $this->beginBlock('header_css'); ?>
<link rel="stylesheet" type="text/css" href="/assets/css/plugins/webuploader/webuploader.css">
<?php $this->endBlock(); ?>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>批量导入</h5>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <form role="form" class="form-horizontal data-from" id="theFrm">
                        <div class="form-group">
                            <label class="control-label col-sm-1">图片</label>
                            <div id="uploader" class="wu-example col-sm-10 col-md-10">
                                <div class="col-sm-6">
                                    <input type="text" name="file" id="file" value="" class="form-control">
                                </div>
                                <div class="col-sm-6">
                                    <div id="picker" style="float: left;">选择文件</div>
                                    <div id="ctlBtn" class="btn btn-primary" style="margin-left:5px; height: 38px">开始上传</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-md-5 col-md-offset-5">
                                    <button class="btn btn-primary btn-save" type="button">
                                        <strong>提  交</strong>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $this->beginBlock('footer_js'); ?>
<script src="/assets/js/plugins/webuploader/webuploader.min.js"></script>
<script type="text/javascript" language="javascript">
    $(function () {
        //上传
        $('#fileupload').fileupload({
            url: '/finance/receipt-upload',
            dataType: 'json',
            done: function (e, data) {
                var file_info = data.result.files[0];
                $('#urlfile').val(file_info.url);
                $('#submit-btn').removeAttr('disabled');
            }
        });
        //提交按钮
        $(".btn-save").click(function(){
            parent.layer.confirm('是否确认提交？', {
                btn: ['确认','取消'], //按钮
                shade: false //不显示遮罩
            }, function(){
                var params = $("#theFrm").serialize();
                $.post('/finance/car-update-frame-info',params,function(obj){
                    parent.layer.msg(data.msg);
                    if(obj.success) {
                        window.location.reload();
                    }
                },'json');
            }, function(){
                //
            });
        });
    })
    var uploader = WebUploader.create({
        auto:false,

        // swf文件路径
        swf: "/assets/js/plugins/webuploader/Uploader.swf) ",

        // 文件接收服务端。
        server: "/common/upload",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id:'#picker',
            multiple:false  //限制多文件上传
        },
        accept:{
            title:'Excel',
            extentions: "xls,xlsx"
        },
        fileVal:"img",
        fileNumLimit: 1
    });
    uploader.on( 'fileQueued', function( file ) {
        //删除错误的第一个文件
        $("#picker").on("click",function () {
            uploader.removeFile(file);
        })
    });
    //点击上传
    $("#ctlBtn").on("click",function () {
        uploader.upload();
    })
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file , msg ) {
        $( '#'+file.id ).addClass('upload-state-done');
        // 把服务器返回的图片地址保存到隐藏域
        if(msg.status ="SUCCESS"){
            layer.msg('上传成功',{icon:1,time:2000});
            $('input[name=file]').val( msg.fileUrl );
        }else{
            layer.msg("上传失败",{icon:2,time:3000});
        }

    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });
</script>
<?php $this->endBlock('footer_js'); ?>