• php 接收多图片base64


    Html:

        <div>
            图片:
            <div>
                <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple="">
                <div position:absolute="">
                    <span> 点击这里上传图片</span>
                </div>
            </div>
        </div>
        <fieldset style="100%;">
            <!-- <legend>图片预览</legend> -->
            <div style="position: relative;" id="ccc">
            </div>
        </fieldset>

    Js:

    <script>
    jQuery.DuoImgsYulan = function(file, id) {
        for (var i = 0; i < 3; i++) {
            if (!/image/w+/.test(file[i].type)) {
                alert("请选择图片文件");
                return false;
            }
            if (file[i].size > 2048 * 1024) {
                alert("图片不能大于2MB");
                continue;
            }
            var img;
            console.log(document.getElementById("fileImg"));
            console.log(file[i]);
            console.log("file-size=" + file[i].size);
            var reader = new FileReader();
            reader.onloadstart = function(e) {
                console.log("开始读取....");
            }
            reader.onprogress = function(e) {
                console.log("正在读取中....");
            }
            reader.onabort = function(e) {
                console.log("中断读取....");
            }
            reader.onerror = function(e) {
                console.log("读取异常....");
            }
            reader.onload = function(e) {
                console.log("成功读取....");
                var div = document.createElement("div"); //外层 div
                div.setAttribute("style", "position:relative;90px;height:90px;float:left;z-index:2;92px;margin-left:8px;");
                var del = document.createElement("div"); //删除按钮div
                del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99;  19px; height:18px;border-radius:50%;")
                var delicon = document.createElement("img");
                delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
                delicon.setAttribute("title", "删除");
                delicon.setAttribute("style", "cursor:pointer; 20px; height:20px");
                del.onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentElement);
                    ClearfirtsImg();
                };
                del.appendChild(delicon);
                div.appendChild(del);
                var imgs = document.createElement("img"); //上传的图片
                var input = document.createElement("input"); //上传的图片
                input.setAttribute("name", "imgs[]");
                input.setAttribute("value", e.target.result);
                input.setAttribute("style", 'display:none');
                imgs.setAttribute("name", "loadimgs[]");
                imgs.setAttribute("src", e.target.result);
                imgs.setAttribute("width", 90);
                if (document.getElementById(id).childNodes.length > 5) {
                    document.getElementById(id).removeChild(document.getElementById(id).firstChild);
                }
                div.appendChild(imgs)
                div.appendChild(input)
                document.getElementById(id).appendChild(div);
            }
            reader.readAsDataURL(file[i]);
        }
    }
    
    function FirstImg() {
        $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc");
    }
    
    function ClearfirtsImg() {
        var file = $("#FirstfileImg")
        file.after(file.clone().val(""));
        file.remove();
    }
    </script>

    ajax:

    $('#submit').click(function(){
            var formData = new FormData($( "#form" )[0]);
            var url = url;
            $.ajax({
                type:'post',
                url:url,
                data:formData,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    // if(data.status==1){
                    //     success(data);
                    // }else{
                    //     error(data);
                    // }
                }
            });
        });

     源码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery图片上传前预览-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
    </style>
    </head>
    <body>
    <div style="padding: 20px">
        <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple="">
        <div position:absolute="">
            <span> 点击这里上传图片</span>
        </div>
    </div>
    <fieldset style="1200px;">
        <legend>图片预览</legend>
        <div style="position: relative;" id="ccc">
        </div>
    </fieldset>
    
    <script>
    jQuery.DuoImgsYulan = function(file, id) {
        for (var i = 0; i < 3; i++) {
            if (!/image/w+/.test(file[i].type)) {
                alert("请选择图片文件");
                return false;
            }
            if (file[i].size > 2048 * 1024) {
                alert("图片不能大于2MB");
                continue;
            }
            var img;
            console.log(document.getElementById("fileImg"));
            console.log(file[i]);
            console.log("file-size=" + file[i].size);
            var reader = new FileReader();
            reader.onloadstart = function(e) {
                console.log("开始读取....");
            }
            reader.onprogress = function(e) {
                console.log("正在读取中....");
            }
            reader.onabort = function(e) {
                console.log("中断读取....");
            }
            reader.onerror = function(e) {
                console.log("读取异常....");
            }
            reader.onload = function(e) {
                console.log("成功读取....");
                var div = document.createElement("div"); //外层 div
                div.setAttribute("style", "position:relative;inherit;height:inherit;float:left;z-index:2;150px;margin-left:8px;margin-right:8px;");
                var del = document.createElement("div"); //删除按钮div
                del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99;  30px; height:30px;border-radius:50%;")
                var delicon = document.createElement("img");
                delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
                delicon.setAttribute("title", "删除");
                delicon.setAttribute("style", "cursor:pointer; 30px; height:30px");
                del.onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentElement);
                    ClearfirtsImg();
                };
                del.appendChild(delicon);
                div.appendChild(del);
                var imgs = document.createElement("img"); //上传的图片
                imgs.setAttribute("name", "loadimgs");
                imgs.setAttribute("src", e.target.result);
                imgs.setAttribute("width", 150);
                if (document.getElementById(id).childNodes.length > 4) {
                    document.getElementById(id).removeChild(document.getElementById(id).firstChild);
                }
                div.appendChild(imgs)
                document.getElementById(id).appendChild(div);
            }
            reader.readAsDataURL(file[i]);
        }
    }
    
    function FirstImg() {
        $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc");
    }
    
    function ClearfirtsImg() {
        var file = $("#FirstfileImg")
        file.after(file.clone().val(""));
        file.remove();
    }
    </script>
    
    </body>
    </html>
  • 相关阅读:
    连接APB1和APB2的设备有哪些
    STM32串口配置步骤
    gcc -o test test.c编译报错
    EmBitz1.11中将左边的目录弄出来
    c51
    c51跑马灯
    51 单片机 跑马灯2
    51 单片机 跑马灯
    spring注解注入:<context:component-scan>以及其中的context:include-filter>和 <context:exclude-filter>的是干什么的?
    Cookie和Session的作用和工作原理
  • 原文地址:https://www.cnblogs.com/zjj1990/p/8335687.html
Copyright © 2020-2023  润新知