js上传图片

最新推荐文章于 2023-03-17 19:33:04 发布

迷失的鹿hold

最新推荐文章于 2023-03-17 19:33:04 发布

阅读量299

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ATYZ123/article/details/79664749

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图

index.html

<body>
<div class="Complaint" >

<textarea placeholder="请输入内容" maxlength="200" 
                 class="comments" rows="6" id="content" name="content" cols="27" ></textarea></div>
<div class="Complaint" style="border-top:0">请上传图片<span  id="imgCount" class="imgCount">0张</span>
  <input id="fileBtn" type="file"  name="file"  accept="image/*" multiple/>
  <div id="all" >
      <span id="imgs"></span>
      <a href="javascript:;" onclick="$('#fileBtn').click()" id="imgBtn"><img src="/s/images/add.png" class="add">
      </a>
  </div>
</div>
<br>
<br>
<div class="Btn"><a href="JavaScript:;" id="submitBtn">提交</a></div>

</body>

index.js


        var count = 4; //允许上传4张图片
    var index = 0;//img索引
    var panel = 1;
    $(function(){
        //图片预览
        $('#imgs').on('click','img',function(){
            var $img = $(this)[0];
            var height = $(window).height()-100; 
//          var center = height / 2 - height / 4; // 居中
            var dialog = '<div><img width="280px" src="'+$img.src+'" alt="" style="max-height:'+height+'px;" /></div>';
             layer.open({
                title:'预览',
                content:dialog,
                skin:'',
                btn:['删除','关闭'],
//              offset: center+'px',
                maxHeight : height+'px',
                btn1:function(){
                    // 删除图片
                    UPLOAD_IMG_DEL($img);

                }   
             })
        })

        //上传文件
            var $c = $('#fileBtn'), $d = $('#imgs');
            var layerLoding ;
            $c.fileupload({
                url : "url",
                autoUpload : true,
                acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
                maxNumberOfFiles : 1,
                maxFileSize : 2097152,
//              formData:{size:size},
                add: function (e, data) {//上传之前的处理11
                    layerLoding = layer.load(1, {
                      shade: [0.6,'black'] //0.1透明度的白色背景
                    });
                    //-------------   

                    var file = $c[0].files[0];
                    var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i; //图片格式正则

//                      在执行之前
                        var imgCount = $d.children('img').size();

                        if(!acceptFileTypes.test(file['type'])){
                            layer.msg('图片类型必须是.gif，.jpeg，.png，.jpg中的一种!', {
                                icon : 2,
                                time : 2000
                            });
                            return false;
                        }
                        if(imgCount > 3 || count < 1)
                        {
                            layer.msg("最多只能上传4张图片",{icon:2,time:2000});
                            return false;
                        }
                        else{
                                count = count - 1; //剩余可上传数量      
//                              上传
                                data.submit();
                        }

                    //*-------------                
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    console.log(progress+"%");
                    if(progress == 100)
                        layer.close(layerLoding);
                },
                done : function(e, data) {
                    if(data.result.errorInfo.errorCode){
                         //执行完之后11
                          index = index + 1; //增长索引
                          var imgHtml = '<img src="'+data.result.respInfo.path+'" alt="" id="img'+index+'" width="70px" height="70px" />' ;
                          $d.append(imgHtml);

                         //最多添加4张
                          var imgCount = $d.children('img').size();
                          var $imgCount = $('#imgCount');
                          $imgCount.text(imgCount+'张');
                          if(imgCount == 4){
                              $('#imgBtn').hide();
                          }
    //                   $('#img'+index+'').attr("src",data.result.respInfo.path);
                    }
                }
            });


    /*
    删除上传图片
    */

    function UPLOAD_IMG_DEL($img) {

        var param = {
                fileUrl : $img.src,
                filePath : 'Complaint'
            };

        $.ajax({
            url : "url", // 跳转到 action    
            data :  JSON.stringify(param),
            contentType : "application/json;charset=UTF-8",
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                if(data.errorInfo.errorCode){
                    $img.remove();
                    count = count + 1;

                    var imgCount = $('#imgs').children('img').size();
                    if(imgCount < 4 && 0 < count){
                        $('#imgBtn').show();
                    }
                     var $imgCount = $('#imgCount');
                    $imgCount.text(imgCount+'张');
                    layer.msg('删除成功',{icon:1,time:2000});
                }else{
                    layer.msg(data.errorInfo.errorMessage,{icon:2,time:2000});
                }
            },error : function(){
                layer.msg('删除失败');
            }
        });
    }