簡體   English   中英

使用圖片預覽上傳多個文件

[英]Multiple file upload with image preview

我有一個多文件上傳表格,我需要顯示上傳圖像的實時預覽。 我已經通過使用jQuery實現了這一點。 但是從這些預覽圖像中,我想選擇默認圖像(一個單選按鈕以及要選擇的圖像)。

<input type="file" name="pictures[]" multiple="multiple" id="fileupload" />

<div id="dvPreview"></div>

jQuery代碼顯示文件預覽;

$("#fileupload").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#dvPreview");
        dvPreview.html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        $($(this)[0].files).each(function () {
            var file = $(this);
            if (regex.test(file[0].name.toLowerCase())) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width:150px; height:100px; margin-right: 10px;margin-top: 10px;");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);
            } else {
                alert(file[0].name + " is not a valid image file.");
                dvPreview.html("");
                return false;
            }
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

但是我需要與此同時放置一個單選按鈕以選擇默認圖像。

現在,我可以看到這樣的帖子值;

array =>
      0 => array
         name => 'image-1.jpg'
         type => 'image/jpeg'
         tmp_name => '/opt/lampp/temp/phpoktbaw'
         error => 0
         size => 706557
      1 => array
         name => 'image-2.jpg'
         type => 'image/jpeg'
         tmp_name => '/opt/lampp/temp/phpl4rbsi'
         error => 0
         size => 1785309
      2 => array
         name => 'image-3.jpg'
         type => 'image/jpeg'
         tmp_name => '/opt/lampp/temp/phpn72EL4'
         error => 0
         size => 104845

如果可能的話,我需要使用選定的默認圖像值向此數組添加另一個變量。

嘗試這個...

<input type="hidden" name="active[]" value="0" class="active" />
<input type="radio" name="activeImage[]" onclick="$('.active').val(0);$(this).prev().val(1)" value="1" />

希望這可以幫助....

看一下鏈接 希望這可以幫助。

編輯:

選擇默認圖像:

<?php
if(!empty($images_arr)){ 
    foreach($images_arr as $image_src){ ?>
        <ul>
            <li >
                <img src="<?php echo $image_src; ?>" alt="">
            </li>
        </ul>
<?php }
}
?>

在此代碼中,圖像標簽下方應有隱藏的單選按鈕,在圖像上單擊選中的圖像下方的單選按鈕將被選中。 這可以使用javascript函數來完成。 將復選框值設置為圖片網址。

單擊時,更改圖像的邊框,以便使用者知道已選擇圖像。

使用php上傳和預覽多個圖像

 <?php // database constants define("DB_SERVER", "localhost"); define("DB_USER", "root"); define("DB_PASS", ""); define("DB_NAME", "demo3"); ?> ?php // Create a database connection $connection = @mysql_connect(DB_SERVER,DB_USER,DB_PASS); if (!$connection) { die("database connection failed: " . mysql_error()); } // Select a database to use $db_select = mysql_select_db(DB_NAME,$connection); if (!$db_select) { die("database selection failed: " . mysql_error()); } ?> <?php //product id enter $product_id='phoneas'; $x=1; if(isset($_FILES['files'])){ $errors= array(); foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){ $file_name = $key.$_FILES['files']['name'][$key]; $file_size =$_FILES['files']['size'][$key]; $file_tmp =$_FILES['files']['tmp_name'][$key]; $file_type=$_FILES['files']['type'][$key]; if($file_size > 2097152){ $errors[]='File size must be less than 2 MB'; } $photo_id=time()+$x; $x=$x+1; $query="INSERT INTO `photo`(`P_ID`, `PHOTO_ID`, `PHOTO_NAME`) VALUES ('$product_id','$photo_id','$file_name')"; $desired_dir="uploads/".$product_id; if(empty($errors)==true){ if(is_dir($desired_dir)==false){ mkdir("$desired_dir", 0700); // Create directory if it does not exist } if(is_dir("$desired_dir/".$file_name)==false){ move_uploaded_file($file_tmp,"$desired_dir/".$file_name); }else{ // rename the file if another one exist $new_dir="$desired_dir/".$file_name.time(); rename($file_tmp,$new_dir) ; } mysql_query($query); }else{ print_r($errors); } } if(empty($error)){ echo "Success"; } } ?> <html> <body> <style type="text/css"> .thumbimage { float:left; width:100px; position:relative; padding:5px; } </style> <div id="wrapper"> <form action="" method="POST" enctype="multipart/form-data"> <input id="imageupload" type="file" name="files[]" multiple/> <input type="submit"/> </form> <div id="preview-image"></div> </div> <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> <script type="text/javascript"> $("#imageupload").on('change', function () { var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#preview-image"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumbimage" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("It doesn't supports"); } } else { alert("Select Only images"); } }); </script> </body> </html> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM