0
사용자가 엔지니어링 스트림을 선택한 다음 학기와 주제를 선택할 수있는 동적 드롭 다운 파일 업로드 시스템을 만들었으며 파일이 원하는 디렉토리에 업로드됩니다. 이 정상적으로 잘 작동합니다. 나는 PHPAcademy에서 Javascript/AJAX File Upload Progress 튜토리얼을 보았습니다.동적 업로드 드롭 다운 파일 업로드를위한 파일 업로드 진행
자바 스크립트 파일을 추가하지 않으면 (업로드 진행 상황) 올바른 디렉토리에 파일이 업로드되고 방화 광에서 오류가 표시되지 않으며 업로드 된 파일에 대한 링크도 제공됩니다.
하지만 JS 파일을 추가 한 후에 업로드 후 링크가 나타나지 않고 항상 루트 디렉토리에 업로드되고 진행 상황이 표시되며 콘솔에 두 가지 오류가 표시됩니다. 여기
내 PHP 코드 :<?php
if(isset($_POST['upload'])) {
$path1=$_POST['one']."/";
$path2=$_POST['two']."/";
$path3=$_POST['three']."/";
$upload_path=$path1.$path2.$path3;
}
else {
echo "Follow the instructions before uploading a file";
}
if(!empty($_FILES['file'])) {
foreach($_FILES['file']['name'] as $key => $name) {
if($_FILES['file']['error'][$key]==0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], $upload_path."$name")) {
$uploaded[] = $name;
}
}
if(!empty($_POST['ajax'])) {
die(json_decode($uploaded));
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> SRMUARD - Upload </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
<script type="text/javascript">
function val()
{
if(document.uploads.three.selectedIndex == 0)
{
alert("Please choose all the appropriate options");
}
}
</script>
<script>
$(function() {
$("#text-one").change(function() {
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
$("#text-two").change(function() {
$("#text-three").load("textdata/" + $(this).val() + ".txt");
});
});
</script>
</head>
<body>
<div value="<?php $upload_path ?>" id="uploadpath"></div>
<div id="uploaded">
<?php
if(!empty($uploaded)) {
foreach($uploaded as $name) {
echo 'File Link: '.'<a href="' . $upload_path . $name . '" >', $name, '</a><br/>';
}
}
?>
</div>
<div id="upload_progress" style="display: none"></div>
<div>
<form action="" method="POST" enctype="multipart/form-data" name="upload" id="upload">
<label for="file">Choose a file: </label><br/>
<input type="file" name="file[]" id="file" multiple="multiple"><br/><br/>
<select id="text-one" name="one">
<option selected value="base">Select Department</option>
<option value="CSE" name="cse">Computer Science Engineering</option>
<option value="ECE" name="ece">Electronics & Communication Engineering</option>
<option value="MECH" name="mech">Mechanical Engineering</option>
</select><br/><br/>
<select id="text-two" name="two"> //Displays options dynamically using text files
<option>Select Semester</option>
</select><br/><br/>
<select id="text-three" name="three"> //Displays options dynamically using text files
<option>Select Subject</option>
</select><br/><br>
<input type="submit" name="upload" id="submit" value="Upload" onClick="val()" />
</form>
<div>
</body>
</html>
그리고 여기 내 자바 스크립트 코드 :
var handleUpload = function(event) {
event.preventDefault();
event.stopPropagation();
var fileInput = document.getElementById('file');
var data = new FormData();
data.append('ajax', true);
for(var i = 0; i < fileInput.files.length; ++i) {
data.append('file[]', fileInput.files[i]);
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event) {
if(event.lengthComputable) {
var percent = event.loaded/event.total;
var progress = document.getElementById('upload_progress');
while(progress.hasChildNodes()) {
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%'));
}
});
request.upload.addEventListener('load', function(event) {
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event) {
alert('Upload failed due to some reason!');
});
request.addEventListener('readystatechange', function(event) {
if(this.readyState == 4) {
if(this.status == 200) {
var links = document.getElementById('uploaded');
var uploaded = eval(this.response);
var div, a;
var phpval = document.getElementById('uploadpath').value;
for(var i=0; i < uploaded.length; ++i) {
div = document.createElement('div');
a = document.createElement('a');
a.setAttribute('href', phpval + uploaded[i]);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
links.appendChild(div);
}
} else {
console.log('Server replied with HTTP status ' + this.status);
}
}
});
request.open('POST','upload.php');
request.setRequestHeader('Cache-Control','no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load',function(event) {
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});
그리고 콘솔에 표시된 오류는 다음과 같습니다
TypeError: document.uploads is undefined
[Break On This Error]
if(document.uploads.three.selectedIndex == 0)
및
SyntaxError: missing ; before statement upload.js file line 47 which is var uploaded = eval(this.response);
는 그리고 내가 실수를 느낀다 다른 장소는 다음과 같습니다
a.setAttribute('href', phpval + uploaded[i]);
phpval 동적 업로드 링크에 일치해야합니다. 나는 그래서 그것의 사업부를 만들었다는 JS에서 $의 upload_path을 사용하여 다음과 같은 값을 얻기 위해 사용하지 않을 수 있습니다 : 데모를 들어
var phpval = document.getElementById('uploadpath').value;
을, 당신은이 링크를 참조 할 수 있습니다 상황이 될 것입니다 더 정확하게, 당신의 방화범이 끌려 오는 장치를 켜고 오류를 확인하고 도와주세요. 나는 이것을 풀 수 없다.
Dynamic Dropdown File Upload with Progress Indication
는 감사 당신이 시도 할 수 많은 JQuery와 옵션이 있습니다
정확히 내가 뭘 찾고 있었는지는 모르겠지만 그래, 고마워. 나는 이것을 더 일찍 만났다. 나는 이것을 줄 수있다. – trollster