多图上传插件

最新推荐文章于 2024-08-09 08:36:55 发布

会跳的绿豆

最新推荐文章于 2024-08-09 08:36:55 发布

阅读量679

点赞数

分类专栏： javascript 文章标签：插件 html

本文链接：https://blog.csdn.net/ning521513/article/details/71514473

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的文件上传组件，实现了文件选择后的实时预览功能，并提供了删除已选文件的交互操作。文章详细展示了如何通过FileReader API读取文件并显示为图片。

摘要由CSDN通过智能技术生成

html部分：

<div class="form-group" style="margin-top:20px;">
                        <label  class="col-sm-3 control-label">商品图片：</label>
                        <div class="voucher_sc_tu">
                            <div class="voucher_sc" style="position:relative;">
                                <!--<input type="file" id="upPhoto" name='upload'>-->
                                <div class="inputFileWrapper">
                                    <label for="upPhoto3" style="padding-left:14px;">
                                        <input type="file" id="upPhoto3" name='upload3'>
                                        <span class="custorm-style">
                                                  <span class="left-button">选择文件</span>
                                                    <span  style="margin-left:22px;line-height:40px;">轮播图：640*300e</span>
                                                </span>
                                        <!--<span class="help-block m-b-none face_img_error_show1" style="color:red;display:none;"><i class="fa fa-times-circle"></i><span class="info">请上传项目背景图片</span></span>-->
                                    </label>

                                </div>
                            </div>
                            <ul  class="picul3" style="width: 500px;margin-left: 300px;list-style-type:none;padding-top:10px;"></ul>
                        </div>
                    </div>

页面js部分：

window.onload = function(){
        $.imageFileVisible3({
            wrapSelector: ".upPhotoImg3",
            fileSelector: "#upPhoto3",
        })
    }

要引用的js文件：

(function($) {
		$.imageFileVisible3 = function(options){
			// 默认选项
			var defaults = {
				//包裹图片的元素
				wrapSelector: null,
				fileSelector:  null ,
				width : '100%',
				height: 'auto',
				errorMessage: "不是图片"
			};
			var opts = $.extend(defaults, options);
			$(opts.fileSelector).change(function(){
				var oli="<li><img class='upPhotoImg3'><div class='hd'></div></li>";
				$(".picul3").append(oli);
				var len=$(".picul3 li").length;
				var file = this.files[0];
				$(".hd").click(function(){
					$(this).closest("li").remove()

				})

				var imageType = /image.*/;
				if (file.type.match(imageType)) {
					var reader = new FileReader();
					reader.onload = function(){
						var img = new Image();
						img.src = reader.result;
						$(img).width( opts.width);
						$(img).height( opts.height);

						$(opts.wrapSelector).each(function(){
							$(opts.wrapSelector).eq(len-1).attr("src", img.src);
							//alert($(opts.wrapSelector).eq(len-1).attr("src"))
						})
						$("#upphoto3").val(img.src)
						$(opts.wrapSelector).parent().attr("href", img.src);
						$(opts.wrapSelector).show();
					};
					reader.readAsDataURL(file);
				}else{
					alert(opts.errorMessage);
				}
			});
		};
})(jQuery);

css样式部分：

.inputFileWrapper label{
            display: block;
            float: left;
            position: relative;
        }
        .inputFileWrapper input[type="file"]{
            position: absolute;
            width: 1px;
            height: 1px;
            clip:rect(0,0,0,0);
        }
        .inputFileWrapper .custorm-style{
            display: block;
            width: 390px;
            height: 40px;
        }
        .inputFileWrapper .custorm-style .left-button{
            width: 100px;
            line-height: 40px;
            background: #18a689;
            color: #fff;
            display: block;
            text-align: center;
            float: left;
        }
        .inputFileWrapper .custorm-style .right-text{
            width: 300px;
            height: 40px;
            line-height: 50px;
            display: block;
            float: right;
            padding: 4px;
            border: 1px solid #008ac7;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .picul3 li{
            width:100px;
            height:100px;
            float:left;
            position: relative;
            margin-right:15px;
        }
        .picul3 li .hd{
            width:20px;
            height:20px;
            background:url("/Public/img/del.png");
            background-size:100% 100%;
            position: absolute;
            right:0;top:0;
        }
        .picul3 li img{
            width:100%;
            height:100%;
        }