zoukankan      html  css  js  c++  java
  • ajax上传图片

    // PHP
    // 保存到本地版本 $coun = 0; $acc = $data["acc_no"]; $imgArr = []; $flag = true; foreach($data as $k => $v) { if ("imgFileStr". $coun == $k) { $imgFileStr = substr($v, strpos($v, ",") + 1); $image = str_replace(",", "//", $imgFileStr); $filename = $acc . "_" . date('YmdHis') . $coun . '.jpg'; // 图片存放地址 $imgPath = "./upload/" . $filename; $res = file_put_contents($imgPath, base64_decode($image)); // 上传失败一张,直接返回 if (!$res) { wrtLog('upload img fail', $coun); $flag = false; break; } array_push($imgArr, $filename); } $coun++; } if(!$flag) { return $flag; } return json_encode($imgArr); $imgFileStr = substr($imgFileStr, strpos($imgFileStr, ",") + 1); $image = str_replace(",", "//", $imgFileStr); // 图片存放地址 $filename = "./upload/" . date('YmdHis').'.jpg'; $res = file_put_contents($filename, base64_decode($image)); var_dump($res); // 入库 TODO

      

    // html
    <span class="imgBox" name="uploadimg"></span>
    <span class="comcss uploadimg" name="uploadimg"></span>
    <span class="file"><strong>+<strong>
           <input type="file" onchange="util.changeImg()" multiple="multiple" id="fileUpload" class="photo">
    </span>
    <button onclick="util.uploadImg()">上传</button>
    
    let imgCount = 0
    util.changeImg = function() {
        let countFiles = $('#fileUpload')[0].files.length;
        if (countFiles > 5) {
            base.showMsg("最多只能上传5张凭证", 3000)
            return
        }
        let imgPath =  $('#fileUpload')[0].files[0].name;
        let ext = imgPath.substring(imgPath.lastIndexOf('.')+1).toLowerCase();
        let imageHolder = $('.uploadimg');
        let imageHolderBox = $('.box');
        if(ext == 'jpg' || ext == 'png' || ext =='jpeg' || ext == 'gif'){
            for (let i = 0; i < countFiles; i++) {
                let reader = new FileReader();
                reader.readAsDataURL($('#fileUpload')[0].files[i])
                reader.onload = function (ev) {
                    console.log(ev);
                    let imgfile = "<span class='comcss thumbImage"+imgCount+"' name='thumbImage"+imgCount+"'><img src='"+ ev.target.result +"'><spanc class='delthumbImage delthumbImage"+imgCount+"' onclick='util.delImg("+imgCount+")'>-</span></span>"
                    $('.imgBox').append(imgfile)
                    // $('<img>',{
                    //     'src':ev.target.result,
                    //     'name':'thumbImage' + imgCount,
                    //     'class':'thumbImage'
                    // }).appendTo(imageHolder),
                };
                imageHolder.show();
                imgCount++
                if (imgCount > 4) {
                    $(".file").css('display','none');
                    
                }
            }
        }
    }
    
    util.uploadImg = function() {
        let form = new FormData();
        var arrUl = $(".imgBox > .comcss");
        $.each(arrUl, function(){
            console.log($(this).find("img").attr("src"));
            let file = $(this).find("img").attr("src")
            let imgFile = file.split('//');
            form.append('imgFileStr',imgFile);
        })
        $.ajax({
            url: '/admin/profile/uploadESignatureImg',
            type:'post',
            data: form,
            processData: false,
            contentType: false,
            dataType: 'json',
            success:function (res) {
                console.log(res);
            }
        })
    }
    

      

  • 相关阅读:
    TCP的流量控制
    [数组]数组元素分割
    [折半查找]排序数组中某个元素出现次数
    [队列]判断出栈序列
    [排序算法]堆排序
    [树结构]有实际用途的树的计算公式
    重写重要的库函数
    [链表]同时遍历两个链表
    [查找]二分查找
    [数组]数组元素置换方法
  • 原文地址:https://www.cnblogs.com/Essaycode/p/14502917.html
Copyright © 2011-2022 走看看