• 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);
    }

  • 相关阅读:
    动态规划-数字三角形V1
    二分-Aggressive cows
    Unity中的UGUI之UGUI的渲染顺序--01
    关于C#中委托的学习笔记
    Unity中的协程用法以及注意事项
    Unity中的单例方法2
    Unity中关于射线的运用——第03节 射线的实际运用
    Unity中关于射线的运用——第02节 圆形射线
    Unity中关于射线的运用——第01节 线段射线
    算法之折半查找
  • 原文地址:https://www.cnblogs.com/chaihy/p/10336790.html
Copyright © 2020-2023  润新知