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

作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路，所以在这里给大家分享一下，不足之处希望谅解。无刷新上传图片一般有两种方式，一种是 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 可以在网上直接下载，这里贴上链接http://plugins.jquery.com/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;

秒客网

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

相关文章