web页面 之 图片上传

　　关于图片上传，在web领域这是个经典问题之一！任何网站都需要牵扯到图片上传保存的问题！

　　关于图片上传，存储的方式有两种，一种直接上传到服务器再把路径返回给客户端然后显示，另一个是直接在客户端本地显示，上传的图片是从本机的内存中读取的！这两种的最大区别就是：减小服务端的压力！增加用户的友好性体验！废话不多说，直接上代码：

第一种：form表单+iframe标签（兼容所有浏览器的Bug组合，注意点：图片会先上传在服务端保存然后在客户端显示，这会给服务器带来压力，不过没别的办法！上传存储时先存在临时文件，用户确认之后，再放在正式文件中）

HTML:
	<form action="/up_img/" method="POST" target="ifr" enctype="multipart/form-data" id="f2">
		{% csrf_token %}
		 <iframe name="ifr" id="ifr" style="display: none">
		</iframe>
		<div class="form-group">
		<label for="inputPassword3" class="col-sm-2 control-label"></label>
		<div class="col-sm-6">
			<div style="z-index: 600;position: relative">
				<img style="width: 80px;height: 80px;margin-top: -60%;margin-left: -100%" src="" id="show_img">
			</div>
			<div style="z-index: 800;position: relative;opacity: 0">
				<input type="file" style="width: 80px;height: 80px;margin-top: -200%;margin-left: -100%" id="up-img" name="avatar">
			</div>
		</div>
	 </form>
	 
js:
<script type="text/javascript" src="/static/jquery-3.2.1.js"></script>
<script>
	$('#up-img').change(function () {
		document.getElementById("ifr").onload=loadIframe;
		$('#f2')[0].submit()
	});
	function loadIframe() {
		var content = document.getElementById('ifr').contentWindow.document.body.innerText;
		$('#show_img').attr('src',content);
		$('#id_avatar').val(content)
	}
	$('#img-code').click(function () {
		$(this).attr('src',$(this).attr('src')+'?')
	})

</script>
	
views:
#头像上传
def up_img(request):
    if request.method == 'GET':
        return HttpResponse('o12!')
    else:
        file_obj = request.FILES.get('avatar')  # 取文件时，需以FILES获取文件数据
        file_path = ('static/img/' + file_obj.name)
        f = open(file_path, 'wb')  # 以字节方式打开空文件，拼接文件路径
        for chunk in file_obj.chunks():
            f.write(chunk)
        f.close()
        return HttpResponse(file_path)

第二种，利用ajax或是现在浏览器的对象实现的图片预览

HTML：

<div class="pics">
	<div style="margin-left: 5px;position: relative">
		{{ obj.avatar }}
		<input type="file" id="imgSelect">
		<img id="previewImg" src="/static/images/default.jpg" alt="点击上传图片" title="点击上传图片">
	</div>
</div>

JS
<script>
    $(function () {
        bindAvatar()
    });

    function bindAvatar() {
        if(window.URL.createObjectURL){
            bindAvatar2();
        }
        else if(window.FileReader){
            bindAvatar3()
        }else{
            bindAvatar1();
        }
    }

	//ajax    #需要上传到服务器
    function bindAvatar1() {
		document.getElementById("imgSelect").onchange=function () {
			var formData = new FormData();
			formData.append("files",$("#imgSelect")[0].files[0]);
			$.ajax({
				url: "/upload_images/",
				type:"POST",
				data:formData,
				contentType:false,
				processData:false,
				dataType:"JSON",
				success:function (arg) {
					$("#previewImg").attr("src",arg.url)
				}
			})
		}
    }
	//以下两种方法，否是利用现在浏览器的对象，直接从本机的内存中获取！
    //兼容性不高
    function bindAvatar2() {
        document.getElementById("imgSelect").onchange=function () {
            var obj = this.files[0]; //获取当前文件对象
            var v = window.URL.createObjectURL(obj);//把当前文件对象传入URL方法，获取当前文件的路径
            document.getElementById("previewImg").src = v;
            document.getElementById("previewImg").onload=function () {
                window.URL.revokeObjectURL(v); //图片加载完成之后，释放
            }
        }
    }
    //兼容性不高
    function bindAvatar3() {
        document.getElementById("imgSelect").onchange=function () {
         var obj = this.files[0];
         var reader = new FileReader(); //创建一个FileReader对象
         reader.onload = function () {
             console.log(this.result);
             document.getElementById("previewImg").src=this.result;
         };//有内容对象就会加载,执行函数; this.result 指获取的文件对象(具体信息)
         reader.readAsDataURL(obj);//读取对象，在浏览器上显示
        }
    }
</script>

CSS:  位置在页面的左上角
div.pics{
    width: 145px;
    height: 150px;
    position: absolute;
    top:15%;
    right: 7%;
    border-left: 1px dotted darkgray;
    overflow: hidden;
}

div.pics img{
    width: 135px;
    height: 150px;
    border-radius: 12px;
    opacity: 1;
}

div.pics #imgSelect{
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
    border-radius: 12px;
    width: 135px;
    height: 150px;
}

views函数
def upload_images(request):
    file_obj = request.FILES.get("files")
    file_path = os.path.join("static/images",file_obj.name)
    with open(file_path,"wb") as f:
        for chunk in file_obj.chunks():
            f.write(chunk)
    dic = {
        "error":0,
        "url":'/'+file_path,
        "message":" 错了...."
    }
    return HttpResponse(json.dumps(dic))
	
urls
    url(r'^upload_images/', views.upload_images,name="imag"),