laravel下 jquery-from 上传图片立即显示

来源：互联网发布：使命召唤4mac迅雷种子编辑：程序博客网时间：2024/06/14 21:19

<style>    .btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;        *display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;        *line-height:20px;color:#fff;        text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b;        border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;        border-bottom-color:#b3b3b3;-webkit-border-radius:4px;        -moz-border-radius:4px;border-radius:4px;}    .btn input{position: absolute;top: 0; right: 0;margin: 0;border:solid transparent;        opacity: 0;filter:alpha(opacity=0); cursor: pointer;}    .progress{position:relative; margin-left:100px; margin-top:-24px;        width:200px;padding: 1px; border-radius:3px; display:none}    .bar {background-color: green; display:block; width:0%; height:20px;        border-radius:3px; }    .percent{position:absolute; height:20px; display:inline-block;        top:3px; left:2%; color:#fff }    .files{height:22px; line-height:22px; margin:10px 0}    .delimg{margin-left:20px; color:#090; cursor:pointer}</style><script type="text/javascript" src="{{asset('lib/jquery-form.js')}}"></script>

<body>

   <div class="btn">        <span>添加附件</span>        <input id="fileupload" type="file" name="mypic">    </div>    <div class="progress">        <span class="bar"></span><span class="percent">0%</span >    </div>    <div class="files"></div>    <div id="showimg"></div></body><script>    $(function () {        var bar = $('.bar');        var percent = $('.percent');        var showimg = $('#showimg');        var progress = $(".progress");        var files = $(".files");        var btn = $(".btn span");        $("#fileupload").wrap("<form id='myupload' action='{{route('consultList')}}' method='post'enctype='multipart/form-data'></form>");        $("#fileupload").change(function(){ //选择文件            $("#myupload").ajaxSubmit({                dataType:  'json', //数据格式为json                beforeSend: function() { //开始上传                    showimg.empty(); //清空显示的图片                    progress.show(); //显示进度条                    var percentVal = '0%'; //开始进度为0%                    bar.width(percentVal); //进度条的宽度                    percent.html(percentVal); //显示进度为0%                    btn.html("上传中..."); //上传按钮显示上传中                },                uploadProgress: function(event, position, total, percentComplete) {                    var percentVal = percentComplete + '%'; //获得进度                    bar.width(percentVal); //上传进度条宽度变宽                    percent.html(percentVal); //显示上传进度百分比                },                success: function(data) { //成功                    //获得后台返回的json数据，显示文件名，大小，以及删除按钮                    files.html("<b>"+data.name+"("+data.size+"k)</b><span class='delimg' rel='"+data.pic+"'>删除</span>");                    //显示上传后的图片                    var img = "http://laravel/upload/"+data.pic;                    showimg.html("<img src='"+img+"'>");                    btn.html("添加附件"); //上传按钮还原                },                error:function(xhr){ //上传失败                    btn.html("上传失败");                    bar.width('0');                    files.html(xhr.responseText); //返回失败信息                }            });        });    });    $(function () {        $(".delimg").live('click',function(){            var pic = $(this).attr("rel");            $.post("{{route('consultList')}}?act=delimg",{imagename:pic},function(msg){                if(msg==1){                    files.html("删除成功.");                    showimg.empty(); //清空图片                    progress.hide(); //隐藏进度条                }else{                    alert(msg);                }            });        });    });</script>

阅读全文

0 0