你好我有一个HTML输入,当选择一个图像时,它会显示在一个div中,并使用一个名为Cropit的JQuery插件进行裁剪。
这是输入HTML ...
<div class="image-editor">
<input type="file" name="images[]" multiple class="cropit-image-input" />
<button type="submit" id="uploadFile" name="uploadFile">Upload files!</button>
<div class="cropit-image-preview" id="images"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
单击UploadFile按钮后,Jquery脚本将运行以裁剪图像。
$(function() {
$('.image-editor').cropit({
imageState: {
},
});
$('#uploadFile').click(function() {
var imageData = $('.image-editor').cropit('export');
open(imageData);
});
});
成功裁剪图像并将其显示在新窗口中。我相信这存储在data:variable中。它也有一个奇怪的URL。
表单会自动将用户带到publish.php,以处理数据。 php脚本将图像上传到文件夹并运行一些验证。图像成功上传但不是裁剪版本。它是随输入提交的标准版本。如何将裁剪版本发送到php文件?
这是我的php文件。
if( isset( $_POST[ "uploadFile" ] ) )
{
uploadFiles();
}
function uploadFiles()
{
$uploadFolder = "uploads/";
//this line is going to go through each of the images if multiple images have been selected to be uploaded
//it takes each image (even if one image has been selected) and checks the file error state
//it finds out what that state is and stores it inside a variable called $error
foreach ( $_FILES[ "images" ][ "error" ] as $key => $error )
{
//what was the state of that error - if it was OK - then continue
//with the file uploading process
if ( $error == UPLOAD_ERR_OK )
{
//reset the upload state to be ready to upload
$uploadOk = 1;
//this line takes the actual filename and stores it inside a variable called $name
$name = $_FILES[ "images" ][ "name" ][ $key ];
//this line get the file and retains the path to it
$pathToFile = $uploadFolder . basename( $name );
//this gets the file type
$fileType = pathinfo( $pathToFile, PATHINFO_EXTENSION );
//check the integrity (i.e. the data of the file) to make sure that it is of an image type
$checkIfItIsAnImage = getimagesize( $_FILES[ "images" ][ "tmp_name" ][ $key ] );
//do the integrity check
if ( !$checkIfItIsAnImage )
{
echo "<h2>Sorry - one of those files was not an image type!</h2>";
$uploadOk = 0;
}
//check to see if the file already exists
if ( file_exists( $pathToFile ) )
{
echo "<h2>Sorry, file " . basename( $name ) . " already exists.</h2>";
$uploadOk = 0;
}
//check file size to see if it is larger than 1000kb
if ( $_FILES[ "images" ][ "size" ][ $key ] > 1000000 )
{
echo "<h2>Sorry, your file " . basename( $name ) . " is too large.</h2>";
$uploadOk = 0;
}
//only allow certain file formats - if the file being uploaded is NOT any of these
if( $fileType != "jpg" && $fileType != "png" && $fileType != "jpeg" && $fileType != "gif" )
{
echo "<h2>Sorry, only JPG, JPEG, PNG & GIF files are allowed.</h2>";
$uploadOk = 0;
}
//check if $uploadOk is set to 0 by an error above
if ( !$uploadOk )
{
echo "<h2>Sorry, your file " . basename( $name ) . " was not uploaded.</h2>";
//if everything is ok, try to upload file
} else {
//this is a PHP method that takes the data and uploads it to the uploads/ folder using the $uploadFolder variable, which defines where to put it on the server, using the variable $name as the file name
if ( move_uploaded_file( $_FILES[ "images" ][ "tmp_name" ][ $key ], $uploadFolder . $name ) )
{
echo "<h2>The file " . basename( $name ). " has been uploaded.</h2>";
} else {
echo "<h2>Sorry, there was an error uploading your file.</h2>";
}
}
}
}
}
全部谢谢