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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。