H5 移动端上传图片 和 视频 页面显示缩略图

这是我第一次写博客，想要分享一下编程经验，因为我也算是一个菜鸟而已，在编程过程中，很多问题 都是通过百度，通过CSDN里面的各位大神分享的经验，才得以解决的，所以我也是本着造福他人，也完善自己的意愿，开始写写博客，分享一下编程中遇到的问题及解决方法。好，废话不说，直接开搞；

html代码：

为了方便大家，我用的都是内嵌样式

			
			
			

			
照片(可上传三张)
				
					
			
			
			

			
视频(可上传一个视频)
		 		
					
			
				
			
			
			
			
		

效果：

实现缩略图效果代码：

var videoFile = document.getElementById('y')
function getFileURL(file) {
	
	var getUrl = null;
		if (window.createObjectURL != undefined) { // basic
			getUrl = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			getUrl = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			getUrl = window.webkitURL.createObjectURL(file);
		}
		return getUrl;
	}
$("#video").hide()
	var selectFile = function() {  //获取视频的大小 ：this.files[0].size
		var url = getFileURL(this.files[0]);//把当前的 files[0] 传进去
		if (url) {
			var srcNew = "";
			$("#video").append(srcNew)
		}
		$("#videoImg").hide()
		$("#video").show()
	}
	videoFile.addEventListener('change', selectFile)

页面效果：

好了，今天第一次 就先简单这样写写，希望能帮到各位新人哈

本人有专业团队承接小程序制作，价格可商量，需要制作小程序的 请联系我本人的QQ或者微信：qq：381645066  微信：18359242333