在iFrame中上传文件 [英] Upload file in iFrame
问题描述
我正在尝试在iFrame中上传文件，到目前为止一切似乎都运行良好，但我无法在PHP端处理图像，因为它似乎没有收到它...
I'm trying to upload a file in an iFrame, so far everything seems to work fine, but I can't process the image in the PHP end as it doesn't seem to receive it...
它确实上传了，因为我的进度条确实有效并显示进度并完成。 responseText说：没有选择图像？
It does seem to upload though as my progress bar does work and show progress and completes. The responseText says: No image selected?
这是我的aJax：
function submitFile() {
//The file location
var theFile = document.getElementById("image").files[0];
var xhr = new XMLHttpRequest();
//Disable submit button whilst upload is active
doc("submit").disabled = true;
//Completed
xhr.onload = function(e) {
if (this.status == 200) {
document.getElementById("imageUpload").innerHTML = xhr.responseText;
doc("submit").disabled = false; //Unlock submit button
}
};
//Progress
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var currentPercentage = Math.round(e.loaded / e.total * 100);
document.getElementById("imageUpload").innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
document.getElementById("imageUpload").style.backgroundSize = currentPercentage + "% 100%";
}
};
//Send data
xhr.open("POST", "php/uploadImage.php", true);
xhr.send(theFile);
}
这是我提交图片的表单，当我上传时，它会上传然而，当我点击提交时，请选择该文件。请参阅onchange函数。
This is the form where I am submitting the image from, it uploads when I select the file however and not when I click submit see the onchange function.
<form action="php/submitMessage.php" onsubmit="validation(this)" method="post" id="submitMessage" enctype="multipart/form-data">
<div class="left half">
<input class="text" type="text" name="name" placeholder="First and Second Name"
rules="[A-Za-z]*\s[A-Za-z]*" />
<input class="text" type="text" name="email" placeholder="Email Address"
rules="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />
<textarea name="message" placeholder="Enter your message here..." rows="5"></textarea>
</div>
<div class="right half">
<input class="text" type="text" name="reg" placeholder="Car Registration"/>
<input type="file" onchange="submitFile();" name="image" id="image" style="display:none;" />
<input type="hidden" name="image_location" id="image_location"/>
<label for="image" id="imageUpload" class="uploadBtn">Upload Image</label>
<p>Message will be regarded as a quote request if you provide an image.</p>
</div>
<input type="submit" id="submit" style="background-color:#fff;color:#000;" value="Submit Message/Quote" />
</form>
这是我的PHP，我想接收文件，调整大小，然后设置会话变量到提交表单其余部分时将使用的位置，因为文件位置需要添加到数据库行。
This is my PHP, I want to receive the file, resize it, and then set a session variable to its location which will be used when the rest of the form is submitted as the file location will need to be added to the database row.
<?php
session_start();
//Image was selected
if($_FILES['image']['tmp_name']) {
//any errors?
if(!$_FILES['image']['error']) {
//validate the file and setup future filename
$new_file = date("Ymdhisa");
//Can't be larger than 5MB
if ($_FILES['image']['size'] > 5000000) {
//Resize the file
$width = 500;
//Keep aspect ratio
$size = getimagesize($_FILES['image']['tmp_name']);
$height = round($width*$size[1]/$size[0]);
//Create object
if ($size[2] == 1) {
$images_orig = imagecreatefromgif($_FILES['image']['tmp_name']);
} else if ($size[2] == 2) {
$images_orig = imagecreatefromjpeg($_FILES['image']['tmp_name']);
} else if ($size[2] == 3) {
$images_orig = imagecreatefrompng($_FILES['image']['tmp_name']);
}
//Get image size to create object
$photoX = imagesx($images_orig);
$photoY = imagesy($images_orig);
//Create resized object
$images_fin = imagecreatetruecolor($width, $height);
imagecopyresampled($images_fin,$images_orig,0,0,0,0,$width+1,$height+1,$photoX,$photoY); //Resize the image
imagejpeg($images_fin,"images/".$new_images); //Save image to file
//Remove image from memory
imagedestroy($images_orig);
imagedestroy($images_fin);
//Set session key for file location
$_SESSION['tmp_image'] = "uploads/".$new_file; //Should be unset when message has been sent
$message = "File successfully uploaded!";
echo $message;
}
}
else
{
$message = "There was an error: ".$_FILES['image']['error'];
echo $message;
}
} else {
echo "No image selected?";
}
?>
推荐答案
这是我的代码，它的工作也很好，希望也为你工作
This is my code and its work fine too me , Hope work for you too
function submitVisualMedia()
{
$(document).ready(function (e) {
var fd = new FormData($("#fileinfo")[0]);
$.ajax({
url:, //YOUR DESTINATION PAGE
type: "POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function ()
{
//some code if you want
}
});
});
return false;
}
<form method="post" id="fileinfo" onsubmit='return submitVisualMedia()' >
<input class="form-control" type="text" id="title" >
<input class="form-control" type="file" name="visualMedia" id="visualMedia" accept="image/*">
<button class="btn btn-success" type="submit">Upload</button>
</form>
和php side
public function uploadVisualMedia() {
ini_set('upload_max_filesize', '25M');
ini_set('post_max_size', '25M');
ini_set('max_input_time', 300);
ini_set('max_execution_time', 300);
$fname = date('l-j-m-Y').'-'.rand(1,1000000);
$size = $_FILES['visualMedia']['size'];
$ftype = $_FILES['visualMedia']['type'];
$temp = $_FILES['visualMedia']['tmp_name'];
$type = array();
$type = explode("/", $ftype);
$filename = "galleries/" . $type[0] . "_gallery/" . $fname . "." . $type[1];
$index = 0;
while (file_exists($filename)) {
$filename = "galleries/" . $type[0] . "_gallery/" . $fname . "($index)" . "." . $type[1];
$index++;
}
move_uploaded_file($temp, $filename);
}
你的变化很小这段代码应该对你有用。有了它，你也可以上传视频音频。
将$ filename更改为您想要的某个文件夹名称..
You most change little in this code and it should work for you fine . with this you can upload video an audio too. change $filename to some folder name you want..
这篇关于在iFrame中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
