欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

浏览器图片上传预览

程序员文章站 2022-05-25 19:06:09
...

文件选择框:<input type="file" id="uploadFile" name="uploadFile" οnchange="javascript:selectImage(this);">

<script>
		
		function selectImage(file) {
			
			if (!file.files || !file.files[0]) {
				return;
			}
			
			var fileLength = file.files.length;
			//限制数量为8
			if(fileLength > 8){
				clearImage();
				alert("请重新选择,最多添加8个文件!")
				return
			}
			// 验证格式
			for(var i = 0 ; i < fileLength ; i++){
				if(!checkPicture(file.files[i])){
					clearImage();
					alert("请上传  .jpg .png .gif .bmp类型的图片文件")
					return
				}
			}
			// 图片预览(解决js闭包问题)
			for(var i = 0 ; i < fileLength ; i++){
				(function(i){
					var reader = new FileReader();
					reader.onload = function(evt) {
						/* document.getElementById('image').src = evt.target.result; */
						var imag = $("<img>").attr("id","image"+i).attr("src",evt.target.result).attr("style","width:44%;margin:2%");
						$("#imageArea").append(imag)
						image = evt.target.result;
					}
					reader.readAsDataURL(file.files[i]);
				})(i)
			}
		}
		// 文件上传
		function uploadImage() {
			$.ajaxFileUpload({
		        //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
		        url:"../repair_apply/uploadfile",
		        secureuri:false,                           //是否启用安全提交,默认为false 
		        fileElementId:'uploadFile',               //文件选择框的id属性
		        dataType:'JSON',                           //服务器返回的格式,可以是json或xml(需要大写)等     text
		        success:function(data, status){            //服务器响应成功时的处理函数
		            data = data.replace(/<pre.*?>/g, ''); // ajaxFileUpload会对服务器响应回来的text内容加上
		            data = data.replace("</pre>", ''); // 本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
		            data = eval("("+data+")");
		        	if (data.success) {
		        		clearImage();
		        		alert("上传成功")
		        			
		            } else  {
		            	alert("文件为空,请重新上传!")
		            }
		        },
		        error:function(data, status, e){ //服务器响应失败时的处理函数
		           alert("上传失败");
		        }
		    }); 
		}
		
		function clearImage(){
			$("#uploadFile").val("");
			$("#imageArea").html('');
			//  上传按钮不可用
			$("#uploadImageBtn").attr("disabled",true);
 
		}
		//文件类型限制
		function checkPicture(file){
			return /.(jpg|png|gif|bmp|JPG|PNG|GIF|BMP)$/.test(file.name)?true:false;
		}
		
	</script>

 

我自己的案列:<input type="file" id="uploadFile" name="uploadFile" οnchange="javascript:selectImage(this);">

 

<script>
function selectImage(file) {
	if (!file.files || !file.files[0]) {
		return;
	}
	
	var fileLength = file.files.length;
	console.log(fileLength);
	//限制数量为8
	if(fileLength > 1){
		alert("请重新选择,最多添加1个文件!")
		return
	}
	// 验证格式
	for(var i = 0 ; i < fileLength ; i++){
		if(!checkPicture(file.files[i])){
			alert("请上传  .jpg .png .gif .bmp类型的图片文件")
			return
		}
	}
	// 图片预览(解决js闭包问题)
	var reader = new FileReader();
	reader.onload = function(evt) {
		$('#imgsrc').attr('src',evt.target.result); 
	}
	reader.readAsDataURL(file.files[0]);
	
}
//文件类型限制
function checkPicture(file){
	return /.(jpg|png|gif|bmp|JPG|PNG|GIF|BMP)$/.test(file.name)?true:false;
}

</script>

 

相关标签: HTMl Jquery Mobile