Я хочу реализовать простую загрузку файла на моей странице интрасети с минимальной настройкой.
Это моя часть HTML:
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>
и это мой JS jquery script:
$("#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 и как вы устанавливаете максимальный размер файла и публикуете настройки.
form_data.append
. Поэтому я изменил скрипт PHP, чтобы отразить новое имя ввода формы. Я также извлек ответ PHP-скрипта в предупреждение об успешном использовании ajax, чтобы помочь с отладкой.
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);
}
});
**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" />';
}
Лучшая загрузка файлов с помощью Jquery Ajax с материализацией Нажмите здесь, чтобы загрузить
Когда вы выбираете изображение, изображение будет конвертировано в базу 64, и вы можете сохранить его в базе данных, чтобы он был также легким.
и это файл php для получения файлов с расширением.
<?
$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);
?>
if (true)
? Всегда оценивать как истину, поэтому бесполезно, не так ли? Также у вас есть дополнительный конец-кудрявый.