动态下拉文件上传进度
File Upload Progress for Dynamic Dropdown File Upload
我做了一个动态下拉文件上传系统,用户可以选择工程流,然后是学期,然后是主题,文件被上传到所需的目录。这正常工作。我遇到了Javascript/AJAX文件上传进度教程从PHPAcademy,事情工作得很好,直到我被困在这个。
不添加javascript文件(用于上传进度),文件被上传到正确的目录中,在firebug中没有显示错误,并且在上传后还提供了文件的链接。
但是在我添加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>
下面是我的javascript代码:
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,所以用它做了一个div,然后用来获得这样的值:
var phpval = document.getElementById('uploadpath').value;
对于演示,你可以参考这个链接,事情会更精确,请打开你的firebug控制台,检查错误并帮助我。我解不出这个。
带进度指示的动态下拉文件上传
谢谢
还要考虑脚本的正确定位。有时,放置脚本的位置可能会导致冲突。我可以看到,你已经有动态下拉功能的脚本。试着把它放在表单之后,看看它是否有效。
希望这对你有帮助。
您可以尝试许多JQuery选项。这是来自Blueimp的一个。
相关文章:
- Highcharts从csv文件动态更新图表
- 从托管的javascript文件动态加载jQuery(如果页面上不可用)
- 有没有办法将样式表或javascript文件动态添加到包含插件的TYPO3页面
- 使用 jquery 从 json 数据文件动态填充选择元素
- 使用 PHP/JS 使用上传的文件动态填充网页
- 如何使用 jQuery 基于 JSON 文件动态更改数据
- 有没有办法将 css 文件或 javascript 文件动态注入 HTML 文档的 head 标签中
- 您能否按字母顺序对从 JSON 文件动态创建的 jQuery 列表进行排序
- 如何将KML文件动态加载到谷歌地图,并进一步加载到折线
- mongodb mongoi从外部文件动态导入
- 使用SVG文件动态修改谷歌地图图标
- 从外部链接到JavaScript的文件动态加载JQuery
- 从json配置文件动态加载脚本
- 如果相同的css &Js文件动态下载多次
- 使用node.js从多个JSON文件动态生成url和页面内容
- 从外部JS文件动态读取所有变量
- 用JS从外部PHP文件动态创建内容
- 从本地xml文件动态创建列表项
- 如何从html5中的js文件动态添加Svg图像
- 从外部.js文件动态访问正在更改的变量