JS实现上传图片的三种方法并实现预览图片功能

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。

常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在超文本标记语言页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。

这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的工业管理学(工业工程)浏览器不支持)。

以下是实现上述思路的方法：

1.模板文件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title/head body div style=' margin-left : 30px；margin-top : 30px ' form action=' ' { % csrf _ token % } H3用户注册/h3 p用户名：输入类型='文本'名称='用户名/p p密码：输入类型='password' name='password'/p p邮箱：输入类型='text '名称='email'/p输入id=' avatar ' type=' text ' value='/static/images/sample。png ' name=' avatar ' style=' width : 400 px ' { #实际应用中要将该投入标签隐藏，display:none#} pinput类型='提交'值='注册/p/form div style=' position : absolute；top : 85 ppxleft : 300 px输入id=' avatarSlect ' type=' file ' style=' position : absolute；向左浮动：z指数： 10；opa城市3360 0；宽度： 100像素；高度： 100像素；img id='头像预览' src=' http :/静态/图片/示例。png ' title='点击更换图片style=' position : absolutez-index : 9；向左浮动：宽度： 100像素；高度： 100px '/div/div/body脚本src=' http :/static/jquery-3。2 .1 .js '/script script $(function(){ BiNDavatar()；});函数bindAvatar() { if(window .网址。createobjecturl){ BiNDavatar 3()；}else if(窗口.文件读取器){ BiNDavatar 2()；} else { BiNDavatar 1()；} } /*Ajax上传至后台并返回图片的url*/函数bindAvatar1() { $('#avatarSlect ').change(function(){ var csrf=$(' input[name=' csrf middleware token ']').val()；var formData=new formData()；formdata。追加(' csrfmiddleware token '，csrf)；formData.append('avatar '，$('#avatarSlect')[0]).文件[0]);/*获取上传的图片对象*/$.Ajax({ URL :/' upload _ avatar/'，type: 'POST '，data: formData，contentType: false，processData: false，success : function(args){ console。日志(args)；/*服务器端的图片地址*/$('#avatarPreview ').attr('src '，'/' args)；/*预览图片*/$('#avatar ').val('/' args)；/*将服务端的图片全球资源定位器(统一资源定位符)赋值给形式表单的隐藏投入标签*/} })})}/*窗口。文件阅读器本地预览*/函数BindavaTar 2(){控制台。日志(2)；$('#avatarSlect ').change(function(){ var obj=$(' # avatarSlect ')[0]).文件[0];var fr=new FileReader()；法郎onload=function(){ $(' # avatar preview ').attr('src '，这个。结果)；控制台。日志(这个。结果)；$('#avatar ').瓦尔(这个。结果)；};法郎readasdataurl(obj)；})}/*窗口网址. createObjectURL本地预览*/函数BindavaTar 3(){控制台。日志(3)；$('#avatarSlect ').change(function(){ var obj=$(' # avatarSlect ')[0]).文件[0];var wuc=窗口网址。createobjecturl(obj)；$('#avatarPreview ').attr('src '，wuc)；$('#avatar ').瓦尔（世界城市联盟);{# $('#avatarPreview ').load(function () {#} /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/{#窗口网址。revokeObjectURl(wuc)；#}{# })#} }) }/script/html2 .视图函数

从姜戈。快捷键导入渲染，HttpResponsedef test(request): return render(request，' test。html ')def upload _ avatar(请求): file _ obj=request .文件。get(' avatar ')文件_路径=OS。路径。join('静态/图像'，file_obj.name)，对于file_obj.chunks()中的块，打开(文件路径，“wb”)为f:写入(块)返回path响应(文件路径)3 .路由系统

从django.conf.urls导入资源定位符从django.contrib导入管理从家导入视图为homeviewsurlppatterns=[url(r'^admin/',admin。网站。urls],url(r'^upload_avatar/',homeviews.upload_avatar),#上传头像url(r'^test/',homeviews.test),#测试页面]验证效果：

选择图片前：

埃阿斯上传图片至服务器，并返回浏览器该图片的url:

窗户。文件阅读器本地预览，形式表单提交：

窗户网址. createObjectURL本地预览，形式表单提交：

以上所述是小编给大家介绍的射流研究…实现上传图片的三种方法并实现预览图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！