JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。
常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。
这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。
以下是实现上述思路的方法：
1. 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="margin-left: 30px; margin-top: 30px">
<form action="">
{% csrf_token %}
<h3>用户注册</h3>
<p>用户名：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="password"></p>
<p>邮箱：<input type="text" name="email"></p>
<input id="avatar" type="text" value="/static/images/sample.png" name="avatar" style="width: 400px"> {# 实际应用中要将该input标签隐藏，display:none; #}
<p><input type="submit" value="注册"></p>
</form>
<div style="position: absolute; top: 85px; left: 300px;">
<input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
<img id="avatarPreview" src="/static/images/sample.png" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
</div>
</div>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
$(function () {
bindAvatar();
});
function bindAvatar() {
if(window.URL.createObjectURL){
bindAvatar3();
}else if(window.FileReader){
bindAvatar2();
}else {
bindAvatar1();
}
}
/*Ajax上传至后台并返回图片的url*/
function bindAvatar1() {
$("#avatarSlect").change(function () {
var csrf = $("input[name='csrfmiddlewaretoken']").val();
var formData=new FormData();
formData.append("csrfmiddlewaretoken",csrf);
formData.append('avatar', $("#avatarSlect")[0].files[0]); /*获取上传的图片对象*/
$.ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (args) {
console.log(args); /*服务器端的图片地址*/
$("#avatarPreview").attr('src','/'+args); /*预览图片*/
$("#avatar").val('/'+args); /*将服务端的图片url赋值给form表单的隐藏input标签*/
}
})
})
}
/*window.FileReader本地预览*/
function bindAvatar2() {
console.log(2);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var fr=new FileReader();
fr.onload=function () {
$("#avatarPreview").attr('src',this.result);
console.log(this.result);
$("#avatar").val(this.result);
};
fr.readAsDataURL(obj);
})
}
/*window.URL.createObjectURL本地预览*/
function bindAvatar3() {
console.log(3);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var wuc=window.URL.createObjectURL(obj);
$("#avatarPreview").attr('src',wuc);
$("#avatar").val(wuc);
{# $("#avatarPreview").load(function () {#} /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
{# window.URL.revokeObjectURL(wuc);#}
{# })#}
})
}
</script>
</html>
2. 视图函数
from django.shortcuts import render, HttpResponse
def test(request):
return render(request, 'test.html')
def upload_avatar(request):
file_obj = request.FILES.get('avatar')
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)
return HttpResponse(file_path)
3. 路由系统
from django.conf.urls import url from django.contrib import admin from home import views as homeViews urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^upload_avatar/', homeViews.upload_avatar), # 上传头像 url(r'^test/', homeViews.test), # 测试页面 ]
验证效果：
选择图片前：
Ajax上传图片至服务器，并返回浏览器该图片的url：
window.FileReader本地预览，form表单提交：
window.URL.createObjectURL本地预览，form表单提交：
以上所述是小编给大家介绍的JS实现上传图片的三种方法并实现预览图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
上传图片预览JS脚本 Input file图片预览的实现示例
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
javascript实现上传图片并预览的效果实现代码
今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像.假如忽略此参数,滤镜将不会作用. 复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http
-
js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj
-
js实现上传图片预览的方法
本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
-
js实现上传图片及时预览
本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下 先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器 /* 案例展示图片预览 */ $(function(){ $("#file0").bind("change",function(){ clickupLoad(); }); }); function clickupLoad(){ var imgObject = document.getElementById('fi
-
javascript上传图片前预览图片兼容大多数浏览器
复制代码 代码如下: <div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> <asp:FileUpload ID="file_head" runat="server" onchange="j
-
js 上传图片预览问题
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴.故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助. 我们一般根据IE6.IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 复制代码 代码如下: <d
-
javascript实现input file上传图片预览效果
本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下 运行效果图: 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.1
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
-
JS创建事件的三种方法(实例代码)
1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的
-
JS截取字符串的三种方法详解
JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1
-
python 三种方法提取pdf中的图片
有时我们需要将一份或者多份PDF文件中的图片提取出来,如果采取在线的网站实现的话又担心图片泄漏,手动操作又觉得麻烦,其实用Python也可以轻松搞定! 今天就跟大家系统分享几种Python提取 PDF 图片的方法.其实没有非常完美的方法,每种方法提取效率都不是百分之百,因此可以考虑用多种方法进行互补,主要将涉及: 基于 fitz 库和正则搜索提取图片 基于 pdf2image 库的两种方法提取图片 基于 fitz 库和正则搜索 fitz 是 pymupdf 的子模块,需要先用命令行安装 pymu
-
vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
目录 前言 一.预览word文件 1.安装 npm 依赖 2.预览在线地址文件 3.预览本地文件 二.预览excel表格 1.安装依赖 2.预览在线表格 三.pdf预览 1.安装依赖vue-pdf 2.在需要的页面注册 3.使用 4.加载本地pdf文件 5.解决pdf使用自定义字体预览和打印乱码问题:pdfjsWrapper.js 总结 前言 之前做PDF预览一直用的pdf.js,这次没有太多附加需求比较简单简,所以决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,
-
js实现的在本地预览图片功能示例
本文实例讲述了js实现的在本地预览图片功能.分享给大家供大家参考,具体如下: 移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件:<input id="f" type="file" name="f" onchange="change()" /> 预览:<img i
-
js改变css样式的三种方法推荐
共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s
-
网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: <body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html> 2.在JS语句调用: <script type="text
-
JS中动态创建元素的三种方法总结(推荐)
1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入
-
js实现图片旋转的三种方法
1 使用jQueryRotate.js实现 示例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt