JS、JQ实现图片上传

最新推荐文章于 2022-03-03 08:53:39 发布

奘倥城

最新推荐文章于 2022-03-03 08:53:39 发布

阅读量327

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_45178761/article/details/107320107

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文档详细介绍了如何利用JavaScript（JS）和jQuery（JQ）库来实现图片上传的功能，包括选择图片、预览、上传到服务器等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS、JQ实现图片上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
    <title>Document</title>
    <style>
        .img-cont{
        width:1030px;
        height:300px;
        border:2px solid #317ef3;
        margin:20px auto;
      }
 
 
      .img-cont>div{
        width:180px;
        height:260px;
        border:1px solid #777;
        float:left;
        margin:20px 0 0 20px;
      }
 
 
      .img-cont>div>div{
        width:180px;
        height:220px;
        border:1px solid red;
      }
 
 
      .img-cont>div>a{
        width:60px;
        height:30px;
        border-radius:4px;
        line-height: 30px;
        text-align: center;
        color:#fff;
        display: block;
        background: #317ef3;
        margin:5px 0 0 0px;
        cursor: pointer;
      }
 
 
      .hide{
        display: none !important;
      }
    </style>
</head>
<body>
  <center>
    <!-- 图片框 -->
    <form>
      <input type="file" onchange='PreviewImage(this)' />
    </form>
    <!-- 图片展示 -->
    <div class="img-cont"></div> 
  </center>
</body>
<script>
//上传方法函数
var id="1";
function PreviewImage(imgFile) { 
    let numCount = $('.img-cont').children().length;  //统计
    if(numCount >= 6){
        alert("最多可以上传6张图片");
        return;
    };
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)/;
    if(!pattern.test(imgFile.value)) {
        alert("系统仅支持jpg/jpeg/png格式的照片！");
        return;
    };

    var file = imgFile.files[0];
    var formData = new FormData();
    formData.append("file", file, file.name);
    $.ajax({
        url: '/rest/personal/up',
        dataType: 'json',
        type: "POST",
        cache: false,
        contentType: false, //必须
        processData: false, //必须
        data: formData,
        async: true,
        success: function (data) {
            //将上传的图片保存起来
            materImage.push(data.data);

            var id= Math.random();
            //定义图片路径
            var path;
            //添加显示图片的HTML元素
            id+=1;
            $(".img-cont").append("<div><div id='"+id+"'><img src='' /></div><a class='hide delete-btn'>删除</a></div>");
            //判断浏览器类型
            if(document.all){
                //兼容IE
                imgFile.select();
                path = document.selection.createRange().text;
                document.getElementById(id).innerHTML="";
                document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
            }else{
                //兼容其他浏览器
                path = URL.createObjectURL(imgFile.files[0]);
                document.getElementById(id).innerHTML = "<img src='"+path+"' width='175' height='220' />";
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.error(errorThrown);
            if (XMLHttpRequest.responseText.indexOf("400") > -1) {
                //接口或参数出错
                alert("网络不给力，请稍后再试！");
            } else {
                //服务器重启
                alert("网络不给力，请稍后再试！");
            }
        }
    });
}  

//重置表单,允许用户连续添加相同的图片
function resetForm(imgFile){
  $(imgFile).parent()[0].reset();
}

//控制"按钮"显示与隐藏
$(".img-cont").off("mouseenter","div").on("mouseenter","div",function(){
    var that=this;
    var dom=$(that).children("a");
    dom.removeClass("hide");
    //为点击事件解绑，防止重复执行
    dom.off("click");
    dom.on("click",function(){
    	//删除当前图片
     	dom.parent().remove();
     });
}).off("mouseleave","div").on("mouseleave","div",function(){
    var that=this;
    $(that).children("a").addClass("hide");
})

</script>
</html>