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

  • 相关阅读:
    NoSuchElementException if input is exhausted 报错
    批量更改文件后缀名
    初识Java
    简单cmd
    电脑操作简易快捷键
    java学习 Markdown+开始写博客
    JavaScript基础知识
    当数位数不够这,前面补0
    vs code 设置
    json日期格式转换为 2019-11-27 格式
  • 原文地址:https://www.cnblogs.com/chaihy/p/10336790.html
Copyright © 2011-2022 走看看