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

时间 2019-11-11

标签 form 表单 html5 html filereader iframe 实现刷新图片上传预览效果栏目 HTML 繁體版

原文原文链接

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

目录结构html

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代码jquery

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

<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;