Я хочу реализовать простую загрузку файла на моей странице интрасети с минимальной настройкой.
Это моя часть HTML:
<input id="sortpicture" type="file" name="sortpic" /> <button id="upload">Upload</button> и это мой JSery-скрипт JS:
$("#upload").on("click", function() { var file_data = $("#sortpicture").prop("files")[0]; var form_data = new FormData(); form_data.append("file", file_data); alert(form_data); $.ajax({ url: "/uploads", dataType: 'script', cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(){ alert("works"); } }); });
В корневом каталоге веб-сайта есть папка с именем «uploads», с разрешениями на изменение для «пользователей» и «IIS_users».
Когда я выбираю файл с файловой формой и нажимаю кнопку загрузки, первое предупреждение возвращает «[object FormData]». второе предупреждение не вызывается, а папка «uploads» тоже пуста !?
Может кто-нибудь помочь мне узнать, что случилось?
Также следующим шагом должно быть переименование файла с именем, сгенерированным на стороне сервера. Может быть, кто-то может дать мне решение для этого.
Вам нужен сценарий, который запускается на сервере, чтобы переместить файл в каталог uploads. Метод jQuery ajax (работает в браузере) отправляет данные формы на сервер, затем скрипт на сервере обрабатывает загрузку. Вот пример использования PHP.
Ваш HTML отлично, но обновите свой JS-сценарий JQuery, чтобы он выглядел следующим образом:
$('#upload').on('click', function() { var file_data = $('#sortpicture').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); alert(form_data); $.ajax({ url: 'upload.php', // point to server-side PHP script dataType: 'text', // what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(php_script_response){ alert(php_script_response); // display response from the PHP script, if any } }); });
И теперь для серверного скрипта, используя PHP в этом случае.
upload.php : скрипт PHP, который запускается на сервере и направляет файл в каталог uploads:
<?php if ( 0 < $_FILES['file']['error'] ) { echo 'Error: ' . $_FILES['file']['error'] . '<br>'; } else { move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); } ?>
Кроме того, пара вещей о целевом каталоге:
И немного о функции PHP move_uploaded_file , используемой в сценарии upload.php :
move_uploaded_file( // this is where the file is temporarily stored on the server when uploaded // do not change this $_FILES['file']['tmp_name'], // this is where you want to put the file and what you want to name it // in this case we are putting in a directory called "uploads" // and giving it the original filename 'uploads/' . $_FILES['file']['name'] );
$_FILES['file']['name'] – это имя файла при его загрузке. Вы не должны использовать это. Вы можете указать файлу любое имя (совместимое с файловой системой сервера):
move_uploaded_file( $_FILES['file']['tmp_name'], 'uploads/my_new_filename.whatever' );
И, наконец, помните о своих значениях upload_max_filesize PHP upload_max_filesize и post_max_size и убедитесь, что ваши тестовые файлы также не превышают. Ниже приведена информация о том, как вы проверяете конфигурацию PHP и как вы устанавливаете максимальный размер файла и публикуете настройки .
var formData = new FormData($("#YOUR_FORM_ID")[0]); $.ajax({ url: "upload.php", type: "POST", data : formData, processData: false, contentType: false, beforeSend: function() { }, success: function(data){ }, error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } });
Лучшая загрузка файлов с помощью Jquery Ajax с материализацией Нажмите здесь, чтобы скачать
Когда вы выберете изображение, изображение будет преобразовано в базу 64, и вы можете сохранить его в базе данных, чтобы он был также легким.
и это файл php для получения файлов uplaoded
<? $data = array(); //check with your logic if (isset($_FILES)) { $error = false; $files = array(); $uploaddir = $target_dir; foreach ($_FILES as $file) { if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) { $files[] = $uploaddir . $file['name']; } else { $error = true; } } $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files); } else { $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST); } echo json_encode($data); ?>
**1. index.php** <body> <span id="msg" style="color:red"></span><br/> <input type="file" id="photo"><br/> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).on('change','#photo',function(){ var property = document.getElementById('photo').files[0]; var image_name = property.name; var image_extension = image_name.split('.').pop().toLowerCase(); if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){ alert("Invalid image file"); } var form_data = new FormData(); form_data.append("file",property); $.ajax({ url:'upload.php', method:'POST', data:form_data, contentType:false, cache:false, processData:false, beforeSend:function(){ $('#msg').html('Loading......'); }, success:function(data){ console.log(data); $('#msg').html(data); } }); }); }); </script> </body> **2.upload.php** <?php if($_FILES['file']['name'] != ''){ $test = explode('.', $_FILES['file']['name']); $extension = end($test); $name = rand(100,999).'.'.$extension; $location = 'uploads/'.$name; move_uploaded_file($_FILES['file']['tmp_name'], $location); echo '<img src="'.$location.'" height="100" width="100" />'; }