0
我一直在使用这个jquery和html图片上传脚本没有任何问题， 该脚本允许用户拖动图片到目标区域并放下它，然后上传图像并显示它。jquery和html拖放图片上传
我的问题是，它现在停止工作，我不能找出为什么（我没有带任何改变，我知道的）
也是它永远不会在Firefox的工作，用户不能通过选择文件或拖放上传并下降。所以我的另一个问题是为什么它停止工作，为什么它在Firefox中完全没有响应，也许它只是一行代码即时通讯使用，可以改变，我真的不知道，但即时通讯希望有人可能有一些想法，谢谢。
的index.php：
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<div id="devcontainer">
<!-- development area -->
<script src="droparea.js"></script>
<style>
.droparea {
position:relative;
text-align: center;
width:180px;
height:190px;
margin-left:-5px;
}
.multiple {
position:relative;
height: 20px;
}
.droparea div, .droparea input, .multiple div, .multiple input {
position: absolute;
top:0;
width: 180px;
height: 190px;
}
.droparea input, .multiple input {
cursor: pointer;
opacity: 0;
}
.droparea {
border: none;
color:#666;
background-color:#FFFFFF;
font-size: 0px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
width:180px;
height:190px;
}
.instructions {
padding-top:90px;
padding-left:0px;
color:#666;
text-align:center;
font-size: 14px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
height:180px;
width:190px;
}
.droparea .progress, .multiple .progress {
position:absolute;
bottom: 0;
width: 180px;
height: 190px;
color: #fff;
background-image:url(../../assets/img/effects/wait.jpg)
}
.multiple .progress {
width: 180px;
height: 190px;
}
#areas { float: left; width: 180px; height:190px;}
div.spot {
float: left;
margin-left: -4px;
margin-top:-4px;
}
.thumb {
float: left;
margin:0 0px 0px 0;
width: 180px;
min-height: 190px;
}
.desc {
float:left;
width: 180px;
height:190px;
}
.signature a { color:#555; text-decoration:none; }
.signature img { margin-right:0px; vertical-align: middle; }
input[type=text], textarea {
margin-bottom: 10px;
padding: 0px;
width: 180px;
height: 190px;
border: 1px solid #bbb;
}
textarea {
height: 58px;
}
input[type=submit] {
float: right;
margin-right: 20px;
padding: 5px 25px;
color: #111;
border: 1px solid #666;
background: #888;
width:180px;
height:190px;
}
h3 { clear: both; padding:5px 0; }
#sampleform { width: 180px; width:190px; }
</style>
<div id="areas">
<input type="file" class="droparea spot" name="xfile" data-post="upload.php" data-width="180" data-height="190" data-crop="true"/>
<form id="sampleform" action="post.php" method="post">
</form>
<script>
$('#sampleform').submit(function(e){
e.preventDefault();
$.ajax({
url:$(this).attr('action'),
type:'post',
data:$(this).serialize(),
dataType:'json',
success:function(r){
$('#form-result').append(
'<div><b>Title: </b>'+r.title+'</div>'
,'<div><b>Description: </b>'+r.description+'</div>'
,'<div><b>Image/File: </b>'
+'<a href="'+ r.url +'" target="_blank">'+ r.url +'</a>'
+'</div>'
);
}
});
});
</script>
</div>
<script>
// Calling jQuery "droparea" plugin
$('.droparea').droparea({
'init' : function(result){
//console.log('custom init',result);
},
'start' : function(area){
area.find('.error').remove();
},
'error' : function(result, input, area){
$('<div class="error">').html(result.error).prependTo(area);
return 0;
//console.log('custom error',result.error);
},
'complete' : function(result, file, input, area){
if((/image/i).test(file.type)){
area.find('img').remove();
//area.data('value',result.filename);
area.append($('<img>',{'src': result.path + result.filename + '?' + Math.random()}));
}
//console.log('custom complete',result);
}
});
</script>
<!-- /development area -->
</div>
post.php中：
<?php
// LOG
$log = '=== ' . @date('Y-m-d H:i:s') . ' ===============================' . "\n"
. 'FILES:' . print_r($_FILES, 1) . "\n"
. 'POST:' . print_r($_POST, 1) . "\n";
$fp = fopen('post-log.txt', 'a');
fwrite($fp, $log);
fclose($fp);
// Result object
$r = new stdClass();
// Result content type
header('content-type: application/json');
$data = $_POST['thumbnail'];
unset($_POST['thumbnail']);
if($data){
// Uploading folder
$folder = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/';
if (!is_dir($folder))
mkdir($folder);
// If specifics folder
$folder .= $_POST['folder'] ? $_POST['folder'] . '/' : '';
if (!is_dir($folder))
mkdir($folder);
$filename = $_POST['value'] ? $_POST['value'] :
$folder . sha1(@microtime() . '-' . $_POST['_default']) . '.jpg';
$data = split(',', $data);
file_put_contents($filename, base64_decode($data[1]));
}
die(json_encode(array_merge(array('url' => $filename), $_POST)));
?>
upload.php的：
<?php
session_start()
?>
<?
// LOG
$log = '=== ' . @date('Y-m-d H:i:s') . ' ===============================' . "\n"
. 'FILES:' . print_r($_FILES, 1) . "\n"
. 'POST:' . print_r($_POST, 1) . "\n";
$fp = fopen('upload-log.txt', 'a');
fwrite($fp, $log);
fclose($fp);
// Result object
$r = new stdClass();
// Result content type
header('content-type: application/json');
// Maximum file size
$maxsize = 10; //Mb
// File size control
if ($_FILES['xfile']['size'] > ($maxsize * 1048576)) {
$r->error = "Max file size: $maxsize Kb";
}
// Uploading folder
$folder = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/';
if (!is_dir($folder))
mkdir($folder);
// If specifics folder
$folder .= $_POST['folder'] ? $_POST['folder'] . '/' : '';
if (!is_dir($folder))
mkdir($folder);
// PASS USER_ID HERE
$folder2 = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/';
if (!is_dir($folder2))
mkdir($folder2);
// New directory with 'files/USER_SESSION_ID/'
$folder = $newDir . $folder2;
// If the file is an image
if (preg_match('/image/i', $_FILES['xfile']['type'])) {
$filename = $_POST['value'] ? $_POST['value'] :
$folder . '_default.jpg';
} else {
$tld = split(',', $_FILES['xfile']['name']);
$tld = $tld[count($tld) - 1];
$filename = $_POST['value'] ? $_POST['value'] :
$folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . $tld;
}
// Supporting image file types
$types = Array('image/png', 'image/gif', 'image/jpeg');
// File type control
if (in_array($_FILES['xfile']['type'], $types)) {
// Create an unique file name
// Uploaded file source
$source = file_get_contents($_FILES["xfile"]["tmp_name"]);
// Image resize
imageresize($source, $filename, $_POST['width'], $_POST['height'], $_POST['crop'], $_POST['quality']);
} else
// If the file is not an image
if (in_array($_FILES['xfile']['type'], $types))
move_uploaded_file($_FILES["xfile"]["tmp_name"], $filename);
// File path
$path = str_replace('upload.php', '', $_SERVER['SCRIPT_NAME']);
// Result data
$r->filename = $filename;
$r->path = $path;
$r->img = '<img src="' . $path . $filename . '" alt="image" />';
// Return to JSON
echo json_encode($r);
// Image resize function with php + gd2 lib
function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 100) {
$quality = $quality ? $quality : 100;
$image = imagecreatefromstring($source);
if ($image) {
// Get dimensions
$w = imagesx($image);
$h = imagesy($image);
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w/$h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width/$ratio;
$new_width = $width;
} elseif ($crop && $ratio <= ($width/$height)) {
$new_height = $width/$ratio;
$new_width = $width;
} else {
$new_width = $height * $ratio;
$new_height = $height;
}
} else {
$new_width = $w;
$new_height = $h;
}
$x_mid = $new_width * .5; //horizontal middle
$y_mid = $new_height * .5; //vertical middle
// Resample
error_log('height: ' . $new_height . ' - width: ' . $new_width);
$new = imagecreatetruecolor(round($new_width), round($new_height));
imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// Crop
if ($crop) {
$crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
//($y_mid - ($height * .5))
}
// Output
// Enable interlancing [for progressive JPEG]
imageinterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' . $ext;
}
switch ($dext) {
case 'jpeg':
case 'jpg':
$jpgQuality = ($quality - 100)/11.111111;
$jpegQuality = ($quality - 100)/11.111111;
imagejpeg($crop ? $crop : $new, $destination, $quality);
break;
case 'png':
$pngQuality = ($quality - 100)/11.111111;
$pngQuality = round(abs($pngQuality));
imagepng($crop ? $crop : $new, $destination, $pngQuality);
break;
case 'gif':
imagegif($crop ? $crop : $new, $destination);
break;
}
@imagedestroy($image);
@imagedestroy($new);
@imagedestroy($crop);
}
}
?>
您是否尝试过使用更现代的jQuery版本？ :) – 2013-04-10 23:28:26
我担心即时通讯真的是新的jquery，那么我该怎么做呢？ – 2013-04-10 23:30:37
查看我的答案 - 如果它解决了您的问题或帮助您解决问题，请立即和/或接受它。 – 2013-04-10 23:32:04