iT邦幫忙

0

input 上傳圖片重複點擊不會覆蓋前面選的檔案

<?php require_once("connctions/connect.php"); ?>
<?php  
if(isset($_POST['MM_Update'])){
    $path = $_FILES['files']['tmp_name'];   //取得檔案的絕對位置(陣列)
    $count = count($path); //取得陣列長度
    for($i = 0;$i <= ($count - 1) ;$i++){
      //$COMPRESS_CONTENT= addslashes(fread(fopen($path[$i], "r"), filesize($path[$i])));//開啟檔案並規範化資料存入變數$data中,$path為陣列,依序取值

      //addslashes 在每個""前添加 \
      //fread 讀取文件(可安全用於二進製文件)
      //fopen 打開文件或者URL

        $sql = "INSERT INTO `binary_data`(`bin_data`) 
        VALUES ('{$COMPRESS_CONTENT}') ";
        $result = mysqli_query($link,$sql);
    };   
    header("Location:upload_img.php");
}
?> 
<!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">
    <title>Document</title>
    <style>
      .none{
        /*display:none;*/
      }
      .delete{
          width:20px;
          height:20px;
      }
    </style>
</head>
<body>
<div id='a' class="upfile-list-mes" ></div>
    <form method="post" action="<?php $_SERVER['PHP_SELF'] ?>" enctype="multipart/form-data">
        <input type="file" id="files" name="files[]" multiple size="40" class="image" accept="image/gif, image/jpeg, image/png">  
        <output id="list"></output>
        <input type="hidden" name="MM_Update" value="adminAdd" >
        <input type="submit" name="submit" value="submit">  
    </form>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
    var fileInput = document.getElementById('files');
    var files = fileInput.files; //filelist
    var fileLists = [];
    $('#files').on('change', function(event) {

        files = fileInput.files; //应该重新获取
        //console.log(files);
        console.log(files);
        files = Array.prototype.slice.call(files); //全部转化为数组
        //console.log(files);

        fileLists = fileLists.concat(files);
        console.log(fileLists);

        //显示文件名面板
        if (files.length !== 0) {
            var html = '';
            for (var i = 0; i < fileLists.length; i++) {
                html += "<p>"+ fileLists[i].name + "&nbsp&nbsp<img class='delete' src='images/sliderup.jpg' >" + "</p>";
            }
            $('.upfile-list-mes').append(html);     //在 .upfile-list-mes 裡加入 html
        }
    });

    /*点击叉号可以删除要上传的文件*/
    $('.upfile-list-mes').on('click', '.delete', function(event) {
        var ind = $(this).parent().index();   //index(),取得元素位置
        $(this).parent().css('display', 'none');
        fileLists.splice(ind, 1);       //修改fileLists,splice(刪除項目的起始位置,刪除的個數,要添加的項目)
        console.log(fileLists);
    });
</script>

js內修改完的fileLists,要如何在PHP內使用且上傳

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-18 09:31:29

抱歉!!不太明白你的問題在哪。
題目是「重複點擊不會覆蓋前面選的檔案」
後面是「要如何在PHP內使用且上傳」

你到底是要問哪一個呢??

不了解你想要用哪一種的情況下,就先告訴你使用file的幾個特性。

1.無法直接用js的方式來指定要上傳的檔案。基於本機安全性原則。
2.用file的指定的檔案,可以利用js來做去除,這點倒是沒問題。
3.可以用js來去觸發file的選檔動作。

所以你想要的東西,一般來說是自刻一個檔案上傳的容器來處理會比較容易。
再搭配hide的file元件來達到你要的效果。

看更多先前的回應...收起先前的回應...
cheer0101 iT邦新手 5 級 ‧ 2019-07-18 09:36:08 檢舉

因為重複點選input type=file 會被覆蓋,而且多選的想刪除也刪除不了,我希望解決兩個問題。您說的
2.用file的指定的檔案,可以利用js來做去除,這點倒是沒問題。
3.可以用js來去觸發file的選檔動作。
要怎麼執行呢?謝謝

cheer0101 iT邦新手 5 級 ‧ 2019-07-18 09:38:23 檢舉

目前js可以刪除,但上傳結果並沒有改變

第2點要跟你說聲抱歉,讓你誤會了。
我剛看了一下我以前的做法。並不是將file的檔案移除掉。而是將選檔後就自動觸發上傳。(但我是指定暫存檔目錄的方式)
然後回傳temp_updatefilename的單純input值在頁面上。

也就是說我並不是去修改file的值,因為基於本機安全性原則是不能做這樣的修改。

我講太快了,畢竟我寫的檔案上傳是在5年前寫的。當時的客戶就希望可以隨時改變調整上傳的圖片。所以我當時是用另外的方式來達到這樣的效果。

我將我當時的流程大致上讓你知道一下。
1.建立file的change。一但有檔案選擇後,就開始跑上傳的動作。其實也是一種預覽圖的做法。

2.上傳的路徑會先指定到一個temp內,而非正式的資料路徑,畢竟這只是暫存的。

3.我是利用了jquery內的from插件來做ajaxsunmit處理。所以可背景運行,上傳完成後,會在我的頁面另外生成input記錄我已經上傳的路徑。並會顯示檔案名或是對應類型物件在頁面上。

4.顯示的檔案名都可以直接單獨移除。

5.當該頁面確定儲存後,跑的並不是file。而是那些成出來的input暫存檔路徑。所做的動作就是將暫存檔移到正式的資料內,並清除所有的暫存檔。

以上就是我的做法,我本想提供我寫的程式碼給你。不過我發現當時寫的也並非是插件化,有客製處理的東西存在,不方便直接給你。

cheer0101 iT邦新手 5 級 ‧ 2019-07-18 15:37:49 檢舉

星大你好,我目前做到上傳暫存及刪除暫存,請問要如何上船暫存呢?
另外我一次新增多個檔案的回全不對,要如何修改呢?

<script src="js/jquery.js"></script>
<script>
    $(document).ready(function(){
        
        $('#files').on("change",function(){
            var html = '';
            var i = '';
            var file = $(this)[0].files;
            //console.log(file);
            //console.log(file.length);
        for(i=0; i<file.length; i++){
            //console.log(i);
            var save_path = "files/Images/",
            form_data = new FormData();
            files = file[i];
            form_data.append("file",files);
            form_data.append("save_path",save_path);
            $.ajax({
                type : "post",
                url : "temp_files.php",
                data : form_data,
                cache : false,
                processData : false,
                contentType : false,
                dataType : 'html'
            }).done(function(data){
                //console.log(files);
                if(data == "yes"){
                    html += "<p id='wrap'>" + "<img class='temp_img' src='"+save_path + files['name'] + "'>" + "<img class='delete' src='images/sliderup.jpg'>" + "</p>" ;
                }
                $('.show_img').append(html);
            })
        };  
    });
    $('.show_img').on('click','.delete',function(){
            //var d_image = $(this).parent().children('img').attr("src");
            $(this).parent().css('display','none');
            $.ajax({
                type:"post",
                url:"temp_delete.php",
                data:{
                    d_img:$(this).parent().children('img').attr("src"),
                },
                datatype:'html'
            }).done(function(data){
                if(data == "yes"){
                    
                }
            });
        })
});
        
</script>
0
dragonH
iT邦高手 1 級 ‧ 2019-07-18 09:56:24

有點看不懂你的問題

或許你直接說你想要達到的效果可能還比容易了解/images/emoticon/emoticon06.gif

如果你是想要透過你的文件列表的刪除功能

來更新 input file 的 file list

我想是不可能的

因為感覺有很大的安全性問題

你可以做的

就是將最後整理完的 file list 上傳

參考

0
vegalou
iT邦新手 4 級 ‧ 2019-07-18 10:07:01

上傳確認檔案名稱後才寫入

寫入檢查重複檔名

前端頁面在上傳中要 false 按鍵,防呆!!

0
小魚
iT邦高手 1 級 ‧ 2019-07-18 10:27:56

所以你是想要上傳然後預覽多張圖片,
可以做新增及刪除的動作嗎?
那你要自己寫js去處理,
可以考慮使用Base64來做儲存的動作,
Js預覽好像也是用Base64來顯示圖片.
不過要注意"+"經過網路協定傳送會被改掉,
傳送之前要先轉成"_",
接收的時候再把"_"改成"+".

0
firecold
iT邦新手 5 級 ‧ 2019-07-18 11:39:43

我之前作法跟星空大差不多
change時直接上傳,回傳檔名

<div class="temp_photo">
    <img src="./path/ajax回傳檔名">
    <span><li>刪除</li></span>
    <input style="display: none;" type="text" name="photos[]" value="ajax回傳檔名">
</div>

因為已經上傳可以做即時預覽
我這邊刪掉是直接把html的.temp_photo remove
temp檔案比對移除是在post後去做確認

0
淺水員
iT邦新手 3 級 ‧ 2019-07-18 15:29:31

form 裡面的 input file 依大家所描述,應該是無法透過 JS 修改內容
因此 onchange 就上傳是一種方式。

下面我補充另外一個做法,這是先在前端先選好要上傳的檔案後,再一起上傳的作法。
不過因為無法修改 form 裡面的 input file,所以是採用 ajax 的方式上傳檔案。

  1. 使用者選擇檔案後,將 files 裡面的東西 buffer 起來。(這部分發問者好像有做)。
  2. 如果需要預覽圖檔,可以用 dataURL 的方式在前端顯示圖檔。參考:MDN範例
  3. 使用者可以繼續刪除、新增圖檔,JS必須根據使用者動作增刪 buffer 裡面的內容。
  4. 上傳 buffer 內的檔案給後端,透過 FormData 物件上傳,後端可以直接用 $_FILES 接收。

PS. 第4步其實也可以直接上傳 dataURL 的 base64 ,這時可能是直接收 $_POST 的資料而非 $_FILES

cheer0101 iT邦新手 5 級 ‧ 2019-07-19 16:22:58 檢舉

請問有可能用buffer 裡的資料做出及時預覽嗎?
FileList {0: File, 1: File, length: 2}
0: File {name: "30714890_1746286322059244_8577168665190541214_n.jpg", lastModified: 1523952163299, lastModifiedDate: Tue Apr 17 2018 16:02:43 GMT+0800 (台北標準時間), webkitRelativePath: "", size: 28529, …}
1: File {name: "50124842_2210145185911163_1531448263872348160_n.jpg", lastModified: 1547865074497, lastModifiedDate: Sat Jan 19 2019 10:31:14 GMT+0800 (台北標準時間), webkitRelativePath: "", size: 57570, …}
length: 2
proto: FileList
↑buffer裡的資料

淺水員 iT邦新手 3 級 ‧ 2019-07-19 16:47:54 檢舉

MDN 的範例幾乎可以拿來直接套用了,你有先看過嗎?

我要發表回答

立即登入回答