Блог

Проблема

В настоящее время я использую ( https://github.com/blueimp/jQuery-File-Upload/wiki ) это загрузчик jQuery HTML5. Базовая версия, без пользовательского интерфейса.

Большая проблема в том, что я искал везде (Mozilla Developer Network, SO, Google и т. Д.) И Не нашел решения для удаления файлов, уже добавленных через dragNdrop или вручную через диалог ввода файла.

Почему я хочу добиться удаления файла? Потому что кажется, что у HTML5 есть своего рода «ошибка». Если вы отбрасываете / выбираете файл (для ввода файла установлено несколько), загружаете его, а затем отбрасываете / выбираете другой файл, у вас волшебным образом появляется новый файл дважды, и он загружается дважды.

Чтобы предотвратить это волшебное кэширование файлов, для использования потребуется обновить страницу, а это не то, что кто-то хочет иметь для своего современного веб-приложения AJAX.

Что я пробовал до сих пор:

• .reset()
• .remove()
• Кнопка сброса
• Установка .val() в «

Похоже, это общая проблема HTML5 JS, а не специфичная для jQuery.

Теория

Может ли быть так, что $j('#post').click (я связываю / повторно связываю много раз разные обратные вызовы), объединяет методы обратных вызовов, так что каждый раз, когда вызывается функция updateFileupload, устанавливается дополнительный обратный вызов. Фактическая проблема теперь больше не будет зависеть от загрузки HTML5, теперь она будет зависеть от моего could, miss-привязки действия .click на моей кнопке отправки (id = #post). Если мы сейчас вызовем .unbind перед каждым .click, не должно быть никакой дублированной привязки обратного вызова.

Код

Функция, содержащая код загрузки:

 function updateFileupload (type) {
            var destination = "";

            switch(type)
            {
                case upload_type.file:
                    destination = '/wall/uploadfile/id/<?=$this->id?>';
                    break;
                case upload_type.image:
                    destination = '/wall/upload/id/<?=$this->id?>';
                    break;
            }

            $j('#fileupload').fileupload({
                dataType: 'json',
                url: destination,
                singleFileUploads: false,
                autoUpload: false,
                dropZone: $k(".dropZone"),
                done: function (e, data) {
                    console.log("--:--");
                    console.log(data.result);
                    upload_result = data.result;
                    console.log(upload_result);
                    console.log("--:--");
                    console.log(type);
                    if(type == upload_type.image)
                    {
                        var imageName = upload_result.real;
                                        console.log(imageName);
                                        $k.get('/wall/addpicture/id/<?=$this->id ?>/name' imageName, function(data){
                                                if(data > 0){
                                                        console.log("I made it through!");
                                                        if(!data.id)
                                                        {
                                                            $k('#imgUpload').html(''); 
                                                            //$k('#imgPreview').fadeOut(); 
                                                            $k('#newPost').val('');
                                                            $k.get("/wall/entry/id/" data, function(html){
                                                                    $k('#postList').prepend(html);

                                                            }); 
                                                        }
                                                }
                                        });
                    }
                  },
                send: function(e, data){

                        var files = data.files;
                        var duplicates = Array(); // Iterate over all entries and check whether any entry matches the current and add it to duplicates for deletion

                        for(var i=0; i<data.files.length;i  )
                        {
                            for(var j=0;j<data.files.length-1;j  )
                            {
                                if(files[i].name == files[j].name amp;amp; i != j)
                                {
                                    duplicates.push(j);
                                }
                            }

                        }
                        if(duplicates.length > 0)
                        {
                            for(var i=0;i<duplicates.length;i  )
                                files.splice(i, 1);
                        }

                        console.log("Duplicates");
                        console.log(duplicates);
                },
                drop: function(e, data){
                    console.log("outside");
//                    $k.each(data.files, function(index, file){
//                            $k('#imageListDummy').after('<li class="file-small-info-box">' file.name '</li>');
//                            console.log(file);
//                            
//                        });
                },
                add: function(e, data){

                        upload_data = data;

                        console.log(data);
                        $k.each(data.files, function(index, file){
                            $k('#imageListDummy').after('<li class="file-small-info-box">' file.name '</li>');
                            console.log(file);

                        });
                        $j('#post').click(function(event){
                                    upload_data.submit();

                                    if(type == upload_type.image)
                                    {
                                        var file = upload_data.files[0];
                                        console.log("I am here");
                                        console.log(file);
                                        var img = document.createElement("img");


                                        img.src = window.URL.createObjectURL(file);
                                        img.height = 64;
                                        img.width = 64;
                                        img.onload = function(e) {  
                                            window.URL.revokeObjectURL(this.src);  
                                        }
                                        document.getElementById('imgPreview').appendChild(img);


                                        $k('#imgPreview').show();
                                    }
                                    clickPostCallback(event);


                                   });
                        $j('#showSubmit').show();
                    }

                });
        }
 

Это может быть скорее проблемой безопасности браузера. Текущие спецификации загрузки файлов не позволяют javascript (или чему-либо еще, насколько я знаю) изменять значение поля file, даже если его удалить.

Итак, я бы предположил, что любой хороший загрузчик файлов создаст несколько полей загрузки файлов, чтобы вы могли удалить все поле, а не играть со значением?

Однако это предположение.

Обновленный ответ на обновленный вопрос:

Разве click() не должен быть привязан только один раз? вам не нужно повторно привязывать событие щелчка к одному элементу ‘#post’ (если этот элемент не изменится, и в этом случае он действительно должен быть классом). Вы можете поместить привязку события click() вне параметров для загрузки файла, если она содержится в $(function(){}, так что это когда DOM будет готов.

Кроме того, я пытаюсь прочитать код без какого-либо HTML и без опыта загрузки нескольких файлов. Лучшее, что можно сделать, это попытаться воссоздать его на jsfiddle.net , таким образом, другие могут войти и поиграть с кодом, не затрагивая вас и вашу вероятность обнаружить проблему, все равно помещая туда код 🙂