I have the following problem:
On a website I'm coding for a client I have a form where you can upload images (up to 5, seperate file-input elements (so no problem caused by a flash / javascript solution)).
But sometimes the upload fails directly (nearly instantly the "Page cannot be displayed"-page is shown) or the request does not contain the files.
This is not an issue of file-size (as it happens sometimes, no matter if the files are larger (~2-3MB) or really small (150kB)) or request timeout (as the upload fails directly and not always - but too often ;-)).
Another weird thing: I tried to analyze the whole thing using Fiddler. But while using Fiddler the problem simply does not occur.
Any ideas?
Tested in IE9/10 on Win7/8
Chrome, FF etc. work fine, of course ;-)
/edit: I use a really simple test script (fails like the regular webapp)
<?='<!DOCTYPE html>'?>
<html>
<head>
<title>Upload Test</title>
</head>
<body>
<form action="http://www.site.com/upl-test/index.php" method="post" enctype="multipart/form-data">
<input type="file" name="img_file0" />
<input type="file" name="img_file1" />
<input type="file" name="img_file2" />
<input type="file" name="img_file3" />
<input type="file" name="img_file4" />
<input type="submit" name="submit_btn" value="Upload" />
</form>
<?php
if(!empty($_FILES)){
echo '<hr /><pre>';
var_dump($_FILES);
echo '</pre>';
}
?>
</body>
</html>
Related
How can I select a file on my local machine using an html file on my lighttpn webserver and start a shell script with the selected file as input? Lets say i have a script for unpacking an archive with unrar. First I visit the website on my webserver and choose the file. The "unpacking-script" should be started with the path to the file as input. Lets say the output is always the same. This is a very simple html file with file selection. But I don't know how to start the script with the file as input.
<html>
<body>
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
My source code is to print upload SWF file tmp_name ?
<?php
echo json_encode($_FILES);
?>
<form method="POST" action="#" enctype="multipart/form-data" novalidate>
<input type="file" id="image" name="image" />
<input id="send" type="submit" name="data" value="Submit" />
</form>
But result i'm getting
{"image":{"name":"file.swf","type":"","tmp_name":"","error":1,"size":0}}
I have tried image uploading method no use on that !
{"image":{"name":"file.swf","type":"","tmp_name":"","error":1,"size":0}}
^^^^^^^^^
This error isn't specific to Flash at all. You'd run into the same issue with other formats as well.
Error 1 is UPLOAD_ERR_INI_SIZE. It means that the file you tried to upload was larger than your server's maximum upload size (upload_max_filesize), so the server didn't accept it.
Change this configuration value, or upload a smaller file.
Simple upload script (to allow staff members to change their profile pic), works fine from a PC, but when I try and upload a photo from an iPhone, the page just halts, like it's trying to load, and nothing happens.
This is my entire test PHP file:
<?php
if (isset($_POST['submitNewImage'])) {
echo 'it works, and the filename is ' . $_FILES['uploadedFile']['name'];
}
?>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<br /><br /><br />
<form action="test.php" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" capture name="uploadedFile" /><br /><br /><br />
<input type="submit" name="submitNewImage" value="Upload" />
</form>
</body>
</html>
Again, this works fine from a PC, but when I touch "Upload" from an iPhone, it just hangs. If I remove the name="uploadedFile", the page executes, but of course there is no file there. How can I get this to recognize an image from an iPhone?
Do you, by any chance, do anything with the image after upload that includes GD?
If you do - is there a difference when you try to upload portrait or landscape image? If portrait works fine, but landscape causes hang (or other way around, cannot remember), problem might be in EXIF data that suggests that image is rotated but GD cannot handle this properly.
Solution lies in getting EXIF data (with exif_read_data()), then stripping it with imagemagick (-strip param in call), following rotating image with either GD or image magick, which will leave you with image that can be manipulated without producing error.
It works for me and it's worth a try!
<?php
if(isset($_POST['submit_image'])) {
$new_image = $_FILES['new_image']['name'];
$new_image_temp = $_FILES['new_image']['tmp_name'];
move_uploaded_file($new_image_temp, "../img/$new_image");
}
?>
<form action="" method="post" enctype="multipart/form-data">
<label for="new_image">Image: </label>
<input type="file" name="new_image">
<input type="submit" name="submit_image" value="Submit">
</form>
Well, it wasn't the code, it's an issue with server the site is on. I have this on a Windows 2008 R2, IIS 7, PHP 5.6. But when I put the same code on a Windows server, 2008 R2, XAMPP, PHP 5.6.15, it works fine. Thank you all for the help, it put me in the right direction. I will post the final result when I figure out the cause, I suspect it's with IIS 7.
I'm developing an image host and wish to have images uploaded to a separate server from my web content, eg: http://i1.mysite.com instead of http://mysite.com/uploads. But I'm having some trouble figuring out how to do that.
Say I have this form:
<form action="http://mysite.com/upload" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="image" id="file_upload" />
<input type="submit" value="Upload" id="upload_submit" />
</form>
That will send an image file to /upload, where I can validate the file and save it, but that will be on the same server as the website is hosted, rather than a dedicated storage server. How can I achieve what I want without having the images uploaded on the same server as my web site?
I could always do:
<form action="http://i1.mysite.com/upload" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="image" id="file_upload" />
<input type="submit" value="Upload" id="upload_submit" />
</form>
which would send the image file to another server, but then when the image upload is complete I'd be redirected to http:/i1.mysite.com/upload.
Anyone have any experience with this and can recommend a course of action? Thank you!
Don't upload to the image server. Such content-specific servers should be optimized for serving up content, and not have to deal with consuming content.
Let the upload form send to your main site's server. You can then use other protocols to transfer the uploaded file(s) to the image servers. rsynch, scp, etc... This way you have all your "control" code in one location, and don't have to worry about synching databases and whatnot between multiple servers - all the data is kept on your main server, and the image servers just passively spit out image data.
I would recommend decoupling these two ideas. First, upload the image to your servers and in a separate process (perhaps a scheduled cron) move the images to other server. You likely do not want the user waiting for two uploads to finish.
Like the others have said, what you're trying to do is not optimal. If you really want to continue to do this, I'd suggest having the form submit to a PHP script which then processes it and places the file where it needs to be and then saves whatever information to the database that is necessary. You'll need to evaluate the best protocol for the data transfer from one server to the other. You'll probably end up using Curl, which you can learn about here and here as well as the curl docs
You could upload the image to your image host, and have it redirect back to your website afterward. One way to do this would be to add hidden "success" and "failure" URL inputs to the form:
<form action="http://i1.mysite.com/upload" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="image" id="file_upload" />
<input type="submit" value="Upload" id="upload_submit" />
<input type="hidden" name="success" value="http://mysite.com/success" />
<input type="hidden" name="failure" value="http://mysite.com/failure" />
</form>
The upload script on your image host would then redirect to the supplied URL after a successful upload:
<?php
.. handle uploaded file ..
if ($success) {
header ('Location: ' . $_REQUEST ['success']) ;
}
else {
header ('Location: ' . $_REQUEST ['error'] . '?message=' . $message) ;
}
?>
Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?
I have developed a custom fieldtype for ExpressionEngine (PHP-based CMS) that lets users upload and store their files on Amazon S3, but the most popular EE hosting service has set a max_file_uploads limit of 20. I'd like to allow the user to upload 20 files, edit the entry again to add 20 more, etc. Unfortunately upon editing the entry the initial 20 files have a "replace this image" file input field that appears to be knocking out the possibility of uploading new images. I'd like to remove any unused file input fields via javascript when the form is submitted.
Yes - you can read the value and even bind to the change event if you want.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$('#tester').change( function()
{
console.log( $(this).val() );
});
});
</script>
</head>
<body>
<input type="file" id="tester" />
</body>
</html>
But there are other, multiple-upload solutions that might suit your needs better, such as bpeterson76 posted.
This code will remove all the empty file inputs from the form and then submit it:
HTML:
<form action="#">
<input type="file" name="file1" /><br />
<input type="file" name="file2" /><br />
<input type="file" name="file3" /><br />
<input type="file" name="file4" /><br />
<input type="file" name="file5" /><br />
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$("form").submit(function(){
$("input:file", this).filter(function(){
return ($(this).val().length == 0);
}).remove();
});
});
Example:
http://jsbin.com/axuka3/
This uploader has worked really well for my purposes: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
The benefit to using it as a basis for your coding is that the files are uploaded asynchronously, so no need to limit to 20 at a time. There's a definite UI benefit to doing the upload while the user is searching.
The resize is a pretty nice feature too, if you need it!