上传图片带上传进度

上传图片带上传进度

html代码:

<div class="canshubb">照片:
    <input type="file" number="0" class="file xuanze2" multiple="multiple">
    <span style="font-size: 30px" class="state0" id="upprog">未上传</span>
    <input type="hidden" name="image" id="image" value="" class="image0">
</div>

js代码

<script>
    //ajax表单提交
    $("#btn").on('click', function() {
        var company_id=$('#company_id').val();
        var name=$('#name').val();
        var code=$('#code').val();
        var image=$('#image').val();
        var content=$('#content').val();
        if (company_id==''){
            alert('请选择所属单位');
            $('#company_id').focus();
            return false;
        }
        if (name==''){
            alert('请输入姓名');
            $('#name').focus();
            return false;
        }
        if (code==''){
            alert('请输入业务代码');
            $('#code').focus();
            return false;
        }
        if (code.length!=10){
            alert('业务代码必须为10个数字');
            $('#code').focus();
            return false;
        }
        if (image==''){
            alert('请输入上传头像');
            $('#image').focus();
            return false;
        }
        if (content==''){
            alert('请输入留言内容');
            $('#content').focus();
            return false;
        }
        /*if (content.length!=20){
            alert('内容最多20字以内');
            $('#content').focus();
            return false;
        }*/

        var action = $('#ajax_form').attr('action');
        $.ajax({
            type: "post",
            url: action,
            data: $("#ajax_form").serialize(),
            success: function(data) {
                if (data.status==200){
                    alert(data.msg);
                    //$('#ajax_form')[0].reset()
                    window.location.href="{:url('index_success')}";
                }else{
                    return  alert(data.msg);
                }
            },
            error: function(data) {
                return  alert(data.msg);
            }
        })
    });
    //上传图片
    $(document).on('change',".file",function(){
        var obj=this;
        var action = "{:url('home/Upload/homeUpload')}";
        var file=obj.files[0];
        //获取文件后缀
        var str=file.name;
        var pos = str.lastIndexOf(".");
        var ext = str.substring(pos+1,str.length);
        var ext = ext.toLowerCase();//所有字符转换小写
        //获取格式数组
        var upload_ext="jpg,jpeg,gif,bmp,png";
        var upload_ext_json=upload_ext.split(',');
        var status=$.inArray(ext,upload_ext_json);
        //var status=upload_ext_json.indexOf(ext);
        if (status<0){
            alert("图片后缀不满足(jpg,jpeg,gif,bmp,png)");
            return false;
        }
        //判断文件大小
        var size=file.size;
        if (size>1024*3*1024){
            alert("图片超过3M!上传失败");
            return false;
        }
        //进行上传
        var xhr = new XMLHttpRequest();
        xhr.open("post", action, true); // 上传地址
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        // 监听状态,实时响应
        // xhr 和 xhr.upload 都有progress事件,xhr.progress是下载进度,xhr.upload.progress是上传进度
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var percent = Math.round(event.loaded*100/event.total);
                console.log('%d%', percent);
                $("#upprog").text(percent+'%');
            }
        };
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var str = $.parseJSON(xhr.responseText); // 返回格式,此处为json,可以为别的格式
                    var num=$(obj).attr("number");
                    if (str.status==200){
                        $(".image"+num).val(str.url);
                        //$(".state"+num).text('已上传');
                        html_str="<img src='"+str.url+"' width='120px' height='120px'/>";
                        $('#show_image').html(html_str);
                    }else{
                        alert(str.msg);
                    }
                }
            }
        }
        var fd = new FormData();
        fd.append('file', file);
        xhr.send(fd);
    }) ;
</script>



回复列表


回复操作