以下のコードを確認してください。私は PHP コードで jquery を使用しています。PHP に関する知識があまりないので、ここから出してください。PHP ページと HTML ページを分離する必要があります。これが私の popup.html です。間違ったコードを実行した場合、教えてください
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
<link rel="stylesheet" href="css/imgareaselect-animated.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-default.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-deprecated.css" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.imgareaselect.pack.js"></script>
<script src="jquery.imgareaselect.min.js"></script>
<script src="jquery.imgareaselect.js"></script>
</head>
<body>
<form id="cropimage" method="post" enctype="multipart/form-data">
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box">
<!-- OUR PopupBox DIV-->
<a id="popupBoxClose">close</a>
<div id="popup_box1" style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
<input type="hidden" name="image_name" id="image_name" value="" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
<div id="container"> <!-- Main Page -->
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
if(document.getElementById('files').files.length == 0){
alert('Select an Image first');
return false;}
// }else {
// When upload button is pressed, load the Popupbox First
loadPopupBox();
// }
$('#popupBoxClose').click( function() {
unloadPopupBox();
$('.imgareaselect-outer').css('display','none');
$('.imgareaselect-selection').css('display','none');
$('.imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-handle').css('display','none');
document.getElementById('files').value="";
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
$('#popup_box img').attr('id','img1');
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' />");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#img1').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
});
$('#popup_box1').load('save_image.php');
</script>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:500px;
width:500px;
background:#FFFFFF;
left: 30%;
top: 20%;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
height: 476px;
margin: 3px;
width: 494px;
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a {
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
</body>
これが私のSave Image.phpです
<?php
//include('db.php');
session_start();
$session_id='1'; //$session id
$path = "uploads/";
?>
<?php
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_REQUEST['submit']))
{
$name = $_FILES['files']['name'];
$size = $_FILES['files']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(1024*1024))
{
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['files']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
$image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
}
?>
<div style="margin:0 auto; width:600px">
<?php if(isset($image))echo $image; ?>
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">
エラー "NetworkError: 404 Not Found - http://abc.com/CropImage-PHP/uploads/%3Cbr%20/%3E%3Cb%3EWarning%3C/b%3E:%20%20imagecreatefromjpeg(uploads/undefined)を取得する%20%5B%3Ca%20href= "
アップロード フォルダの作成中にエラーが発生しました。