What's wrong in my ajax?
Question
I own a site called flopl.com. It's pretty basic. Upload your files, and get a URL back with a link to the file. But I wasn't the one coding it, and now I can't get help from the person who did anymore. There's something wrong in the code, but I don't know enough to figure out what. So.. Here's the code:
HTML:
<!DOCTYPE html>
<html style="width:100%">
<head>
<title>flopl</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<link rel="shortcut icon" href="http://flopl.com/images/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:25px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:-1px; left:48%; }
</style>
</head>
<body style="width:100%">
<div style="background-color:#2d2d2d; width: auto; height:150px; padding:-10px; margin-top:-20px;">
</div>
<div style="background-color:#8be1ab; width: auto; height:10px; padding:-10px; margin-top:0px;">
</div>
<center>
<img width="275px" src="images/logo.png" style="position:absolute; margin-top:-145px; margin-left:-145px;" />
</center>
<div style="width:400px; margin:auto; position:relative; margin-top:15%;" >
<center>
<div style="margin-top:90px; margin-left:25px;">
<p style="word-spacing:0.6px; font-family:Helvetica font-weight:light; margin-top:-20px; position:center;">Upload any type of file,</p>
<p style="word-spacing:0.6px; font-family:Helvetica font-weight:light; margin-top:-20px; position:center;">with no compression!</p>
</div>
</center>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajax_image.php'>
<a href="#" class="buttonsub" onclick="document.getElementById('photoimg').click();"><img width="332px" src="images/upload.png" style="position:absolute; top:-120px; left:40px;"/></a>
<input type="file" name="photoimg" id="photoimg" style="padding: 0; margin: 0; display: none;" />
</form>
<div class="progress" style="display: none;">
<div class="bar"></div >
<div class="percent">0%</div>
</div>
<div id="status"></div>
<center>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img width="300" src="images/uploading.png" alt="Laddar upp...."/>');
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var progress = $('.progress');
$('#imageform').ajaxForm({
target: '#preview',
beforeSend: function() {
status.empty();
progress.show();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
//status.html(xhr.responseText);
}
}).submit();
});
});
</script>
<div id='preview' style="margin-top:40px;">
</div>
</center>
</div>
</div>
<div class="footer" id="footer">
<div id="top">
<img id="copyright" src="images/footer.png" alt="">
<a id="logo" href="http://www.simplyvisual.se" target="_blank">
<img width="150px" src="/images/SV.png" alt="Simply Visual">
</a>
</div>
<!--<div class="footer" id="footer"><img style="margin-top:1%; margin-left:0%" width="150" src="images/SV.png" /><img style="margin-top:0%;" src="images/footer.png" />--></div>
</body>
</html>
And the PHP:
<?php
session_start();
$session_id='1'; // User session id
$path = "upload/";
function url($url) {
$url = preg_replace('~[^\\pL0-9_]+~u', '-', $url);
$url = trim($url, "-");
$url = iconv("utf-8", "us-ascii//TRANSLIT", $url);
$url = strtolower($url);
$url = preg_replace('~[^-a-z0-9_]+~', '', $url);
return $url;
}
if(!empty($_POST) && !empty($_FILES['photoimg']) && $_SERVER['REQUEST_METHOD'] == 'POST')
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
$pi = pathinfo($name);
$txt = $pi['filename'];
$ext = $pi['extension'];
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "Here's the link to your file: <a href='http://flopl.com/".$path.$actual_image_name."'>http://flopl.com/".$path.$actual_image_name."</a>";
}
} else {
echo "Something went wrong.";
exit;
}
?>
The progress-bar is showing, but I only get "Something went wrong" back. I've checked, the PHP.ini is set up correctly. The files are not uploading, and therefor also not giving me a URL back.
Could anyone figure out what's wrong?
Best regards, primarypanda
1 answers
solution1
0 2015-11-03 03:06:46
I found at least 2 problems with your project.
Your host may allow upload big files but you need to check that file uploads are set or not in PHP.ini file. in most of the CPanels, they allow to make custom php.ini file settings, here you need to set max_file_uploads = 20M or so.
using isset() function may cause some problem, I use !empty() function instead because it checks whether the variable is set and not empty both. so you can do it in your code like...
if(!empty($_POST) && !empty($_FILES['photoimg']) && $_SERVER['REQUEST_METHOD'] == 'POST'){...}You can notice that I have also checked that $_FILES['photoimg'] are also not empty, that means that the file is actually uploaded.
Best luck and Thank you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.