时间戳

首页 > 解决方案 > 如何上传已预览的图像

javascript - 如何上传已预览的图像

问题描述

我有这个带有 预览图像的表格

如何通过按 获取查看的图片的名称DODAJ button。我需要预览图像的名称才能将它们保存到数据库中。我还想限制用户最多添加 5 张图像的能力。

谢谢你。

我的表格代码：

<form action="uploadProduct.php" method="post">
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <p class="heading lead">Dodavanje proizvoda</p>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="white-text">×</span>
                        </button>
                    </div>

                    <!--Body-->
                    <div class="modal-body">
                        <p class="text-center">
                            <strong>Odaberite katogoriju i ispunite prazna polja.</strong>
                        </p>
                        <hr>
                        <select name="kategorija" id="category" class="browser-default custom-select">
                            <option valve="0" selected>Odabir kategorije</option>
                            <option value="1">Poljoprivredni strojevi</option>
                            <option value="2">Šumarski strojevi</option>
                            <option value="3">Ostalo</option>
                        </select>

                        <div id="product1" style="display:none">
                            <div class="md-form">
                                <input type="text" name="naziv" class="form-control" required>
                                <label for="product_name">Unesite naziv proizvoda</label>
                            </div>
                            <div class="md-form">
                                <textarea type="text" name="opis" class="md-textarea form-control" rows="3"></textarea>
                                <label for="product_specif">Opis proizvoda</label>
                            </div>
                            <div class="md-form">
                                <input id="fileUpload" multiple="multiple" type="file"/> 
                                <div id="image-holder"></div>
                            </div>
                        </div>
                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-right">
                        <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Odustani</a>
                        <button type="submit" name="productSubmit" class="btn btn-primary waves-effect waves-light">Dodaj</button>
                    </div>
                </div>
            </form>

用于预览图像的 JQUERY：

$(document).ready(function() {
            $("#fileUpload").on('change', function() {
                //Get count of selected files
                var countFiles = $(this)[0].files.length;
                var imgPath = $(this)[0].value;
                var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                var image_holder = $("#image-holder");
                image_holder.empty();
                if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                    if (typeof(FileReader) != "undefined") {
                    //loop for each file selected for uploaded.
                    for (var i = 0; i < countFiles; i++) 
                    {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                        $("<img />", {
                            "src": e.target.result,
                            "class": "thumb-image"
                        }).appendTo(image_holder);
                        }
                        image_holder.show();
                        reader.readAsDataURL($(this)[0].files[i]);
                    }
                    } else {
                    alert("This browser does not support FileReader.");
                    }
                } else {
                    alert("Pls select only images");
                }
            });
        });

上传的PHP代码：

<?php
include 'user.php'; 
$product = new User('products');
if(isset($_POST['productSubmit'])){
    $porductData = array(
        'category' => $_POST['kategorija'],
        'name' => $_POST['naziv'],
        'description' => $_POST['opis'],
        'file_name_1' => $_POST['image_1'],
        'file_name_2' => $_POST['image_2'],
        'file_name_3' => $_POST['image_3'],
        'file_name_4' => $_POST['image_4'],
        'file_name_5' => $_POST['image_5'],
    );
    $insert = $product->insert($porductData);
}
?>

标签： javascriptphpjquery

解决方案

<html>
<head>
<style type="text/css">
.thumb-image{
 float:left;width:100px;
 position:relative;
 padding:5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<form action="uploadProduct.php" method="post">
<div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" multiple="multiple" type="file"/> 
<div id="image-holder"></div>
<button type="submit" name="productSubmit">Upload</button>
</div>
</form>

<script>
$(document).ready(function() {
        $("#fileUpload").on('change', function() {
                    //Get count of selected files
                    var countFiles = $(this)[0].files.length;
                    var imgPath = $(this)[0].value;
                    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                    var image_holder = $("#image-holder");
                    image_holder.empty();
                    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                        if (typeof(FileReader) != "undefined") {
                        //loop for each file selected for uploaded.
                        for (var i = 0; i < countFiles; i++) 
                        {
                            var reader = new FileReader();
                            reader.onload = function(e) {
                            $("<img />", {
                                "src": e.target.result,
                                "class": "thumb-image"
                            }).appendTo(image_holder);
                            }
                            image_holder.show();
                            reader.readAsDataURL($(this)[0].files[i]);
                        }
                        } else {
                        alert("This browser does not support FileReader.");
                        }
                    } else {
                        alert("Pls select only images");
                    }
                });
      });
</script>
</body>
</html>

After adding images when I click on upload I want get names of previewed images and send it to upload.php.

推荐阅读