zoukankan      html  css  js  c++  java
  • php ajax bootstrap多文件上传图片预览,ajax上传文件

    <form enctype="multipart/form-data" id="upForm">
        <label class="btn btn-info" for="picture" title="Upload image file" id="uploadImgBtn" class="image_up">
            <input type="file" name="file" multiple class="sr-only" id="picture" accept=".jpg,.jpeg,.png">    
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">选择本地图片</span>
        </label>
        <div id="previewImg" class="col-md-5">

    </div>
    </form>

    $('#picture').on('change', function(){
    #图片预览并上传
    var imgFiles = $(this)[0].files
    for (i=0;i<imgFiles.length;i++){

    filePath = imgFiles[i].name
    fileFormat = filePath.split('.')[1].toLowerCase()
    src = window.URL.createObjectURL(imgFiles[i])
    if(!fileFormat.match(/png|jpg|jpeg/) ) {
    alert('上传错误,文件格式必须为:png/jpg/jpeg')
    return
    }
    var preview = document.getElementById("previewImg")
    var img = document.createElement('img')
    img.width = 600

    img.src = src
    preview.appendChild(img)


    }
    //多文件
    var formData = new FormData();
    for(var i=0; i<$('#picture')[0].files.length;i++){
    formData.append('file[]', $('#picture')[0].files[i]);
    }
    //单文件

    // var formData = new FormData($('#upForm')[0]);
        //formData.append('file',$(':file')[0].files[0]);
        console.log(formData)
    $.ajax({
    url:'/orc/recognition/upload',
    type: 'POST',
    data: formData,
    //这两个设置项必填
    contentType: false,
    processData: false,
    success:function(data){
    var srcPath = eval("(" + data + ")");
    //注意这里的路径要根据自己的储存文件的路径设置
    if(srcPath.msg != 'true'){
    //alert('未识别的文件');
    }else{
    //$('#image_orc').attr('src', '/' + srcPath.src);
    }
    location.reload();

    }
    })

    })
    PHP:
    public function upload(){
        $upFile = $_FILES['file'];
    var_dump($upFile);
    }

  • 相关阅读:
    hmset
    java 调用mongo 判断大于等于 并且小约等于<=
    Maven项目,别人的没问题,自己机器一直有问题
    linux 时间datetimectl 问题
    真正手把手教 git
    0324-SQLMAP使用参数备注
    安全推荐网址:
    JavaScript Base64 作为文件上传的实例代码解析
    学习笔记|变量的解构赋值
    学习笔记|let 和 const 命令
  • 原文地址:https://www.cnblogs.com/chaihy/p/10336790.html
Copyright © 2011-2022 走看看