图片上传插件

最新推荐文章于 2024-10-12 16:49:42 发布

邱家少爷

最新推荐文章于 2024-10-12 16:49:42 发布

阅读量324

点赞数

分类专栏：自己造的轮子文章标签： js html css javascript

本文链接：https://blog.youkuaiyun.com/qq_39047764/article/details/107744025

版权

自己造的轮子专栏收录该内容

6 篇文章

订阅专栏

在网上找了很多个上传图片的插件，但是都没有跟微信一样可以上传9张图的，所以自己组装了一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FormData</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://big123.gitee.io/zhihucdn/sourcecdn/3.4.1jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/m.js"></script>
<style>
    #feedback{width:1200px;margin:0 auto;}
    #feedback img{float:left;width:300px;height:300px;}
    .inner{
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .problem{
        width:100%;
    }
.ipt input{
    border:1px solid red;
}
ul,li{
    list-style: none;
}
ul{
    height: auto;
}
ul:after {
    content:""; 
    display: block; 
    clear:both; 
}
.surfaceThree {
    position: relative;
    height: 150px;
    width: 120px;
    background: #d80505;
    float: left;
    border-radius: 6px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #fff;
    border: 1px solid red;
    background:url(./img/1.png) no-repeat ;/*5px 5px*/
    background-size: 100% 100%;
}
ul li{

}
.surfaceThree input {
    position: absolute;
    top: 0;
    left: 0;
    /*right: -110px;*/
    /* color: #fff; */
    height: 30px;
    /* 重点代码让input隐藏 */
    opacity: 0;
    width: 100%;
    height: 100%;
    background: green;
    border:1px solid blue;
    cursor:pointer;
}
.surfaceThree span {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: blue;
    border:1px solid blue;
}
.surfaceThree div {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 86px;
    opacity: 0;
    width: 30px;
    height: 30px;
    background: blue;
    /*border:1px solid blue;*/
    background:url(./img/del_img.png) no-repeat ;/*5px 5px*/
    background-size: 100% 100%;
}
input.(type='file', ng-file-select='install($files)',style='opacity:0;filter:alpha(opacity=0);')
</style>
</head>
<body style="height: 100vh;background-color: #EEF5FD;">
<div class="ipt">
    <input type="file" name="image" multiple="multiple"  id="inputfile1" class="inputfile" />
    <input type="file" name="image" multiple="multiple"  id="inputfile2" class="inputfile2" />
    <input type="file" name="image" multiple="multiple"  id="inputfile3" class="inputfile3" />
    <input type="file" name="image" multiple="multiple"  id="inputfile4" class="inputfile4" />
    <button>上传</button>
</div>
<ul>
    <li class="surfaceThree"><input id="ipt1" type="file" title=" " accept="image/png,image/jpg,image/gif,image/JPEG"/><span></span><div></div></li>
    <!-- <li class="surfaceThree" style="display:;"><input id="ipt2" type="file" title=" "></li> -->
    <!-- <li class="surfaceThree" style="display:;"><input id="ipt3" type="file" title=" "></li> -->
</ul>
<!-- <div class="surfaceThree">
      <input type="file" title=" ">
 </div>
 <div class="surfaceThree">
      <input type="file" title=" ">
 </div>
 <div class="surfaceThree">
      <input type="file" title=" ">
 </div> -->

<div id="feedback"><img src=""></div>    <!-- 响应返回数据容器 -->
<script type="text/javascript">
$(document).ready(function(){
    // $("ul li input").oninput(function(){
    //     console.log("选择了文件");
    // })

    $("ul").on("change","li input",function(e){
        if($("ul").find("li").length<10){
            console.log("选择了文件");
            var index = e.currentTarget.dataset.id;
            var filePath = $(this).val();
            var that=this;
            changeImg(e,filePath,index,that);
            if($("ul").find("li").length<9){
                $("ul").find(this).parent().after(`<li class="surfaceThree" style="display:;"><input  type="file" title=" " accept="image/png,image/jpg,image/gif,image/JPEG"><span></span><div></div></li>`);
            }else{
                
            }
        }else{
            
                
        }
            
        // alert(index);
    })
    $("button").click(function(){
    // $("#inputfile").change(function(){
        //创建FormData对象
        var formdata = new FormData();
        //为FormData对象添加数据
        //
        $(".surfaceThree").each(function(){
            // alert($(this).text());
            $.each($(this).find("input")[0].files, function(i, file) {
                if(i==0){
                    console.log(this);
                    // console.log($("body").find(".surfaceThree"));
                    console.log($("body .surfaceThree").index($(this)),$(".surfaceThree").index(this));
                    // console.log($(this).index(".surfaceThree"));
                    formdata.append(Math.floor(Math.random()*100) , file);//'upload_file'
                }else{

                }
                    
            });
        });
        // $.each($('.inputfile')[0].files, function(i, file) {
        //     formdata.append('upload_file', file);
        // });
        // $.each($('.inputfile2')[0].files, function(i, file) {
        //     formdata.append('upload_file2', file);
        // });
        $.ajax({
            url:'submit_form_process.php',
            type:'POST',
            data:formdata,
            dataType: "json",
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            success:function(data){
                console.log(data);
                console.log(formdata);
                data = $(data).html();
                // if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
                // else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));
            }
        });
    });
    function changeImg(e, filePath, index,that) {
        fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        //检查后缀名
        // if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
        //     showError('文件格式必须为：png/jpg/jpeg');
        //     return;
        // }
        //获取并记录图片的base64编码
        var reader = new FileReader();
        // alert(filePath);
        reader.readAsDataURL(e.target.files[0]);
        console.log(e,filePath,index)
        reader.onloadend = function() {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
            var dataURL = reader.result;
            // alert(dataURL);
            // console.log(dataURL);
            // console.log(dataURL)
            // 显示图片
            $(that).parent().css("background","url("+dataURL+") no-repeat");
            $(that).parent().css("background-size","100% 100%");
            $(that).parent().find("span").css("z-index","10");
            $(that).parent().find("div").css("z-index","12");
            $(that).parent().find("div").css("opacity","1");
            $("#feedback img").attr("src",dataURL);
           // $("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' onclick="imgDisplay(this)"><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');
        };

    }
    $("ul").on("click","li div",function(e){
        // console.log(this);
        if($("ul").find("li").index($(this).parent())==8){
            console.log($("ul").find("li").index($(this).parent()));
            $(this).parent().remove();
            $("ul").children("li:last-child").after(`<li class="surfaceThree" style="display:;"><input  type="file" title=" " accept="image/png,image/jpg,image/gif,image/JPEG"><span></span><div></div></li>`);
        }else{
            console.log($("ul").find("li").index($(this).parent()));
            $(this).parent().remove();
        }
        // var len1=$("ul").find("li").length;
        // console.log($("ul").find("li").length);
        // if(len1==9&&$("ul").find("li").length==8){
        //     $("ul").children("li:last-child").after(`<li class="surfaceThree" style="display:;"><input  type="file" title=" " accept="image/png,image/jpg,image/gif,image/JPEG"><span></span><div></div></li>`);
        // }
    });
    // $("ul li div").on("click",function(){
    //     console.log(this);
    // })
});
</script>
</body>
</html>

上面是html跟js的部分

下面是后台PHP的部分

<?php
    //header('content-type:text/html charset:utf-8');  /* 这句要删除，否则可能会导致IE下回传HTML变成下载 */
    header("content-type:text/html;charset=utf-8"); 

    //不存在当前上传文件则上传
    // if(!file_exists($_FILES['upload_file']['name'])){

    // 	move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name']));
    // } 
    	
    //输出图片文件<img>标签
    // echo "<textarea><img src='{$_FILES['upload_file2']['name']}'/></textarea>";
    // echo "<textarea><img src='{$_FILES[0]['name']}'/></textarea>";
//End_php
    $senddata = array();
    date_default_timezone_set("Asia/Shanghai");
foreach ($_FILES as $key=>$value){
    // echo $key.'=>'.$value.'<br>';
    // echo json_encode($key.'=>'.$value.'<br>');
    list($msec, $sec) = explode(' ', microtime());
	$msectime = (float)sprintf('%.0f', (floatval($msec) + floatval($sec)) * 1000);
	$string = strrev($value['name']);
	$array = explode('.',$string);
	$ex = strrev($array[0]);
	// $rename = date("Y").date("m").date("d").date("H").date("i").date("s").rand(100, 999).".".$ex;
	$rename = date("Y").date("m").date("d").date("H").date("i").date("s").rand(100, 999).".".$ex;
    move_uploaded_file($value['tmp_name'],iconv('utf-8','gb2312',"./upload/".$rename));
    // echo $key.'=>'.$value.'<br>';
    // echo json_encode($key.'=>'.$value.'<br>');
    array_push($senddata, array(
            'code'=>"上传成功",
            'key'=>$key,
            'value'=>$value['name'],
            'team'=>"1",
    ));
}
echo json_encode($senddata);


?>

网上有很多小的插件，最终就是组装，

里面的引入文件网上都有，很多，随便找找下载下来就行。