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

javascript php

豬豬人 2019-07-18 09:21:05 ‧ 4444 瀏覽

分享至

<?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內使用且上傳

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

5 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-07-18 09:31:29

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

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

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

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

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

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

豬豬人 iT邦新手 4 級 ‧ 2019-07-18 09:36:08 檢舉

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

豬豬人 iT邦新手 4 級 ‧ 2019-07-18 09:38:23 檢舉

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

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-07-18 10:09:44 檢舉

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

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

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

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

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

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

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

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

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

豬豬人 iT邦新手 4 級 ‧ 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>

星大你好，我目前做到上傳暫存及刪除暫存，請問要如何上船暫存呢?
另外我一次新增多個檔案的回全不對，要如何修改呢?
```
<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>
```

修改

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-07-18 09:56:24

有點看不懂你的問題

或許你直接說你想要達到的效果可能還比容易了解

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

來更新 input file 的 file list

我想是不可能的

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

你可以做的

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

參考

回應
分享
檢舉

登入發表回應

不明

【＊＊此則訊息已被站方移除＊＊】

小魚

iT邦大師 1 級 ‧ 2019-07-18 10:27:56

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

回應
分享
檢舉

登入發表回應

firecold

iT邦新手 1 級 ‧ 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後去做確認

回應
分享
檢舉

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2019-07-18 15:29:31

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

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

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

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

回應 2
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 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裡的資料