form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果

作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路，所以在这里给大家分享一下，不足之处希望谅解。无刷新上传图片一般有两种方式，一种是 form 表单+iframe ,还有一种是 ajax ，form表单涉及$_FILES，ajax涉及 base64的编码和解码，个人认为，form 表单的方法要简单很多，所以在这里分享给大家。这里我使用了 HTML5中的 window.FileReader对象来实现图片上传之后的预览效果，使图片不会提前传到服务器的图片文件夹中,关于 window.FileReader对象,大家感兴趣的可以在网上找找，资料很多，这里就不介绍了。下边贴上完整代码：

目录结构

HTML页面

<!DOCTYPE html>
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="js/jquery-2.1.3.min.js"></script><scriptsrc="js/jquery.form.js"></script><title>demo</title><style>.imgShow{width:200px;height:60px;border:1px dotted #ccc;margin-bottom:15px;}.uploadImg_{width:45px;line-height:25px;color:black;position:relative;border:1px solid red;padding:5px;background:rgb(245, 245, 245);border:1px solid rgb(179, 179, 179);overflow:hidden;}#file{width:90px;position:absolute;left:0;top:0;opacity:0;}</style>
</head><body><div><divclass="imgShow"></div><formaction="upload.php"id="form_"target="myImg"method="post"enctype="multipart/form-data"><spanclass="uploadImg_">                       <-- multiple：多图上传  files[]代表多图上传  类型是数组  accept:规定上传图片的格式--><inputtype="file"id="file"name="files[]"accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"multiple>上传图片⬆️</span></form><iframewidth=""height=""frameborder="1"name="myImg"style="display:none;"></iframe></div>
</body>

js代码

js中要使用jQuery.form.js 来实现 form 表单的回调，这个 js 可以在网上直接下载，这里贴上链接http://plugins.jquery.com/form/

<script>varhtml_= '';varcArr=[];$('#file').change(function() {if(window.FileReader) {for(vari= 0; i<file.files.length; i++) {varofread= newFileReader();cArr.push(ofread);}for(vari= 0; i<cArr.length; i++) {cArr[i].readAsDataURL(file.files[i]);cArr[i].onload= function(e) {varresult=e.target.result;html_+= '<img class="img_id" src="' +result+ '" alt="" />';$('.imgShow').html(html_);}}}})varsubmit=document.querySelector('#submit');submit.onclick= function() {varform=$('#form_');varoptions={url:'upload.php',type:'post',success:function(e) {　　　　　　　　//返回来的数据是 json 字符串，直接存入数据库$.ajax({type:"POST",url:"data.php",data: {data_: e},datatype:"json",success:function(data) {$('.imgShow').html(null);html_= '';cArr=[];},error:function() {//请求出错处理
}});}};form.ajaxSubmit(options);}</script>

php 上传图片

<?php$src=$_FILES['files']['tmp_name'];
$file=$_FILES['files']['name'];
$arr=[];
$dataArr;
for($i=0;$i<count($file);$i++){$file_=explode('.',$file[$i]);$ext=array_pop($file_);$rand=time().mt_rand().'.'.$ext;$dst="img/$rand";array_push($arr,$dst);$dataArr=json_encode($arr);if($_FILES['files']['error'][$i]===0){move_uploaded_file($src[$i],$dst);}
}
echo $dataArr;

转载于:https://www.cnblogs.com/zhaotiezhu/p/8031623.html

form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果相关推荐

html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
HTML5实现图片上传与预览
File API File - 独立文件:提供只读信息,例如名称.文件大小.mimetype 和对文件句柄的引用. FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或 ...
php无表单上传文件,php – 来自表单的WP邮件附件,无文件管理器上传文件
从表单通过wp_mail函数我正在尝试发送带附件的电子邮件,而不将文件上传到文件管理器. 我收到附件的电子邮件.但附件名称不正确,没有文件类型.请帮忙解决这个问题. 这是HTML表单有我的PHP代码 ...
form表单图片预览 layui_layui 实现图片上传和预览
[学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面前台实现 autocomplete="off" class="layui-input" ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
FileReader图片上传并预览
方法一:上传图片并预览 <input type="file" οnchange="openFile(event)"/><img id=&quo ...
html5 form表单,html5 教程
2019独角兽企业重金招聘Python工程师标准>>> html5 form表单 html5 教程 html5 form表单表单介绍 1.XHTML中需要放在form之中的诸如inp ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...

form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果

form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果相关推荐

最新文章

热门文章