jquey图片上传-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="upl_bar pull-left">
		    <label class="upl_img_btn">
		    <div class="preview preview_bg img" id="images"></div>
		    <input type="file" class="img_bg_file">
		    <i class="ion-plus"></i>
		    <div>点击上传图片</div>
		    </label>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js">
			
		</script>
		<script type="text/javascript">
			$(".img_bg_file").change(function(e){
				//获取元素中的属性
			    var obj = $(this);
			    var parents = obj.parents(".upl_bar");
				// 获取文件路径
			    var file1 = $('.img_bg_file').val();
				//输出一个49
			    var extStart = file1.lastIndexOf('.');
				//读取文件格式
			    ext = file1.substring(extStart,file1.length).toUpperCase();
			    //判断图片格式
			    if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){
			        Win.error('请上传正确格式的图片');
			        resetFile();
			        return false;
			    }
			    var size = this.files[0].size / 1024;
			    if (size > 5120) {
			        Win.error("图片上传不能大于5M");
			        resetFile();
			        return false;
			    }
			    if (obj[0].files) {
					//相当于一个拼接的工作
			        var formData = new FormData();
					//相当于一个拼接的工作
					//file文件路径 ,
					//obj[0]html中的代码
					//files[0]
			        formData.append("file", obj[0].files[0]);
			        $.ajax({
			            url: "/app/upload",
			            type: "post",
			            data: formData ,
			            contentType:false,
			            processData:false,
			            async: false,
			            success: function (data) {
			                console.log(data);
			                if (data.resultCode == "200") {
			                    //文件服务器路径
			                    filePath = window.location.protocol + '//' + window.location.host +                       data.resultValue.filePath;
			                }else {
			                    Win.error(data.resultMsg)
			                }
			            },
			            error: function (err) {
			                alert(err);
			            }
			        });
			        // Firefox下取得的是图片的数据;
			        var objectURL = window[window.URL ? 'URL' : 'webkitURL']['createObjectURL'](obj[0].files[0]);
			        if(!objectURL) {
			            return;
			        }
			        parents.find('.preview_bg').show().css({'background-image': 'url(' + objectURL + ')'});
			        window[window.URL ? 'URL' : 'webkitURL']['revokeObjectURL'](obj[0].files[0]);
			    }
			    obj.val("");
			     //还原
			    function resetFile(){
			        //去除图片
			        $('#images').hide();
			    }
			});

		</script>
	</body>
</html>