作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路，所以在这里给大家分享一下，不足之处希望谅解。无刷新上传图片一般有两种方式，一种是 form 表单+iframe ,还有一种是 ajax ，form表单涉及$_FILES，ajax涉及 base64的编码和解码，个人认为，form 表单的方法要简单很多，所以在这里分享给大家。这里我使用了 HTML5中的 window.FileReader对象来实现图片上传之后的预览效果，使图片不会提前传到服务器的图片文件夹中,关于 window.FileReader对象,大家感兴趣的可以在网上找找，资料很多，这里就不介绍了。下边贴上完整代码：
目录结构
HTML页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="js/jquery-2.1.3.min.js"></script><script src="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><div class="imgShow"></div><form action="upload.php" id="form_" target="myImg" method="post" enctype="multipart/form-data"><span class="uploadImg_">
<-- multiple：多图上传 files[]代表多图上传 类型是数组 accept:规定上传图片的格式--><input type="file" id="file" name="files[]" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple>上传图片⬆️</span></form><iframe width="" height="" frameborder="1" name="myImg" style="display:none;"></iframe></div></body>
js代码
js中要使用jQuery.form.js 来实现 form 表单的回调，这个 js 可以在网上直接下载，这里贴上链接/form/
<script>var html_ = '';var cArr = [];$('#file').change(function() {if (window.FileReader) {for (var i = 0; i < file.files.length; i++) {var ofread = new FileReader();cArr.push(ofread);}for (var i = 0; i < cArr.length; i++) {cArr[i].readAsDataURL(file.files[i]);cArr[i].onload = function(e) {var result = e.target.result;html_ += '<img class="img_id" src="' + result + '" alt="" />';$('.imgShow').html(html_);}}}})var submit = document.querySelector('#submit');submit.onclick = function() {var form = $('#form_');var options = {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;
