init

public/frontend/weben/scripts/upload.js

@@ -0,0 +1,141 @@
++function(){
+	class img_compress_upload {
+		constructor (data){
+			let this_default ={
+				max_height: 1024,
+				max_width: 1024,
+				max_num: 1,
+				list_box:'',
+				add_btn:'',
+        accept:'',// 可设置的文件的上传类型
+				del_btn_class: 'del',
+				submit_btn:'',
+				submit_form:'',
+			},
+			self = this;
+			this._data = $.extend(this_default, data);
+			this._max_height = this._data.max_height;
+			this._max_width = this._data.max_width;
+			this._add_btn = this._data.add_btn;
+			this._list_box = this._data.list_box;
+			this._del_btn_class = this._data.del_btn_class;
+			this._submit_btn = this._data.submit_btn;
+			this._submit_form = this._data.submit_form;
+			this._index = -1;
+      this._accept = this._data.accept;
+
+			this._add_event();
+		}
+		_add_event(){
+			let self = this;
+			$('body').append("<input type='file' id='add_file' style='display:none;' accept='.jpg,.jpeg,.png,.gif,.webp,.tiff,.bmp ,.mp4,.wmv ,.m4v,.flv,.3gp'>");
+			this._add_file = $('#add_file');
+		    this._add_file.on('change',function (){//监听图片选择
+		        if($(this).val()){//存在图片
+		            self._storage();
+		        }
+		    });
+		    this._add_btn.on('click',function(){
+		    	self._index = -1;
+		    	self._add_file.click();
+		    });
+		    this._list_box.on('click', 'li:not(".add_btn")', function(event){
+		    	self._index = $(this).index();
+		    	self._add_file.click();
+		    });
+		    
+		    this._list_box.on('click', '.'+this._del_btn_class, function(event){
+		    	$(this).parents('li').remove();
+		    	event.stopPropagation();
+		    });
+
+		    
+		}
+		_storage (){
+			let self = this,
+				reader = new FileReader(),
+	        	file=this._add_file[0].files[0];
+            
+            var straccpet = '.jpg,.jpeg,.png,.gif,.webp,.tiff,.bmp ,.mp4,.wmv ,.m4v,.flv,.3gp'
+            var index = file.name.lastIndexOf('.')
+            // 获取后缀
+            var ext = file.name.substr(index + 1)
+            // 输出结果
+            if (straccpet.indexOf(ext) === -1) {
+              alert('文件上传的格式不对,请重新上传')
+              return false
+            }
+            // 限制文件大小上传
+          if ((file.size / 1024 / 1024) > 10) {
+            alert('文件上传大小不能大于10M！')
+            return false
+          }
+	        // if(!/image\/\w+/.test(file.type)){
+	        //     alert("请上传图片格式文件");
+	        //     return false;
+	        // }
+	        reader.readAsDataURL(file);
+	        reader.onload = function(e){
+            if(reader.result){
+              if('.mp4,.wmv ,.m4v,.flv,.3gp'.indexOf(ext) !== -1){
+                self._modify_img_and_show(reader.result,file.name,'vido');
+              } else {
+                self._compress(reader.result);//压缩图片
+              }
+            }
+	        }
+		}
+		_modify_img_and_show (img_data,filename,type){
+			this._add_file.val('');
+			if(this._index > -1){//修改
+				let this_box = this._list_box.find('li').eq(this._index);
+        if(type){
+          this_box.html('<span>' + filename +'</span> <i class="del">x</i><input name="img[]" type="hidden" value="' + img_data + '">')
+        } else {
+          this_box.html('<img src="' + img_data + '"> <i class="del">x</i><input name="img[]" type="hidden" value="' + img_data + '">')
+        }
+        // this_box.find('img').attr('src', img_data);
+				// this_box.find('input').val(img_data);
+			}else{
+        let this_html = ''
+        if(!type){
+          this_html = '<li><img src="' + img_data + '"> <i class="del">x</i><input name="img[]" type="hidden" value="' + img_data + '"></li>';
+        } else {
+          // 如果是视频类型
+          this_html = '<li style="width: 140px;word-wrap:break-word; height: 140px;border: 1px solid #e5e5e5;  display: flex; align-items: center;overflow: hidden;justify-content: center;padding: 0;"><span>' + filename +'</span> <i class="del">x</i><input name="img[]" type="hidden" value="' + img_data + '"></li>';
+        }
+        console.log('bb')
+				this._add_btn.before(this_html);
+			}
+		}
+		_compress (img_data){
+			var self = this;
+			if(!img_data)return;
+			var canvas = document.createElement('canvas'),
+				img = new Image(),
+				max_height = this._max_height,
+				max_width = this._max_width;
+
+			img.onload = function(){
+				if(img.height > max_height) {
+					img.width = img.width * (max_height / img.height);
+					img.height = max_height;
+				}
+				if(img.width > max_width){
+					img.height = img.height *(max_width / img.width);
+					img.width = max_width;
+				}
+				var ctx = canvas.getContext("2d");
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+				canvas.width = img.width; canvas.height = img.height;
+				ctx.fillStyle="rgba(255,255,255,1)";
+				ctx.fillRect(0,0, img.width, img.height);
+				ctx.drawImage(img, 0, 0, img.width, img.height);
+				self._modify_img_and_show(canvas.toDataURL("image/jpeg"));
+			};
+			img.src = img_data;//先绑定onload，再设置链接！！
+		}
+	}
+	window.img_compress_upload = img_compress_upload;
+}()