如何允许用户使用 php 和 jquery 从单个输入字段中选择多个文件？
我有一个租赁列表网站，用户可以在其中创建页面并显示其列表的照片。我创建了一个带有多个文件输入字段的表单，供用户选择要上传的文件以及提交按钮：
<form method="post" enctype="multipart/form-data">
<input type="file" name="image_1" id="image_1" />
<input type="file" name="image_2" id="image_2" />
<input type="file" name="image_3" id="image_3" />
<input type="submit" name="submit" value="Submit" />
</form>
用户选择图像后，我正在运行一个调整大小并上传它们的函数：
function uploadAndResize($imageFile, $filename) {
$folder = '../images/';
$orig_w = 400;
$filename = str_replace(' ', '_', $filename);
list($width, $height) = getimagesize($imageFile);
$src = imagecreatefromjpeg($imageFile);
$orig_h = ($height / $width) * $orig_w;
$tmp = imagecreatetruecolor($orig_w, $orig_h);
imagecopyresampled($tmp, $src, 0, 0, 0, 0, $orig_w, $orig_h, $width, $height);
imagejpeg($tmp, $folder.$filename, 100);
imagedestroy($tmp);
imagedestroy($src);
}
$imageFile_1 = $_FILES['image_1']['tmp_name'];
$filename_1 = basename( $_FILES['image_1']['name']);
$imageFile_2 = $_FILES['image_2']['tmp_name'];
$filename_2 = basename( $_FILES['image_2']['name']);
$imageFile_3 = $_FILES['image_3']['tmp_name'];
$filename_3 = basename( $_FILES['image_3']['name']);
uploadAndResize($imageFile_1,$filename_1);
uploadAndResize($imageFile_2,$filename_2);
uploadAndResize($imageFile_3,$filename_3);
我当前的设置有效上传照片很棒，但我想将多个文件输入字段替换为一个能够一次选择多个文件的文件输入字段。但是，我确实希望选择的每个文件都具有与下一次迭代相结合的“image_”名称属性，以便它能够与我正在使用的当前脚本很好地配合。我还需要它为所选的尽可能多的文件调用该函数。
如何允许用户使用 php 和 jquery 从单个输入字段中选择多个文件，并且仍然可以使用我当前的脚本？
I have a rental listing site where users can create a page and show photos of their listing. I have created a form with multiple file input fields for the users to pick the files to upload as well as a submit button:
<form method="post" enctype="multipart/form-data">
<input type="file" name="image_1" id="image_1" />
<input type="file" name="image_2" id="image_2" />
<input type="file" name="image_3" id="image_3" />
<input type="submit" name="submit" value="Submit" />
</form>
After the user selects their images, I am running a function which resizes and uploads them:
function uploadAndResize($imageFile, $filename) {
$folder = '../images/';
$orig_w = 400;
$filename = str_replace(' ', '_', $filename);
list($width, $height) = getimagesize($imageFile);
$src = imagecreatefromjpeg($imageFile);
$orig_h = ($height / $width) * $orig_w;
$tmp = imagecreatetruecolor($orig_w, $orig_h);
imagecopyresampled($tmp, $src, 0, 0, 0, 0, $orig_w, $orig_h, $width, $height);
imagejpeg($tmp, $folder.$filename, 100);
imagedestroy($tmp);
imagedestroy($src);
}
$imageFile_1 = $_FILES['image_1']['tmp_name'];
$filename_1 = basename( $_FILES['image_1']['name']);
$imageFile_2 = $_FILES['image_2']['tmp_name'];
$filename_2 = basename( $_FILES['image_2']['name']);
$imageFile_3 = $_FILES['image_3']['tmp_name'];
$filename_3 = basename( $_FILES['image_3']['name']);
uploadAndResize($imageFile_1,$filename_1);
uploadAndResize($imageFile_2,$filename_2);
uploadAndResize($imageFile_3,$filename_3);
The current setup I have works great to upload the photos, but I would like to replace the multiple file input fields with one single file input field that has the ability to select multiple files at one time. I do, however, want each file that gets selected to have a name attribute of "image_" combined with the next iteration, so that it will work well with the current script I am using. I also need it to call the function for as many files that were selected.
How do I allow users to select multiple files out of a single input field using php and jquery and still have it work with my current script?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在 HTML 表单输入元素中使用“mutiple”属性。
例如：
返回文件数组。
using "mutiple" attribute in HTML form input elements.
for eg:
returns array of files.
请参阅这个很棒的教程，展示如何将多文件 jquery 插件与 php 一起使用。请注意，您必须循环遍历 php 代码中的文件（请参阅上面提到的教程。）
Refer to this great tutorial showing how to use a multi-file jquery plugin with php. Note that you will have to loop through the files in your php code (refer to the tutorial mentioned above.)
我推荐您http://valums.com/ajax-upload/
让它工作起来很困难，但结果很棒。允许：
.- 多个文件
.- 进度条
该插件包含一个可以轻松修改的 php 脚本。
只需在我向您展示的页面中进行测试即可。
I recommend you http://valums.com/ajax-upload/
It is something difficult to make it works, but the results is awesome. Allow:
.- Multiple files
.- Progress bar
This plugin contains a php script that can be easily modified.
Just test it in the page I showed you.
使用jquery多文件上传插件。很简单。请参阅下面的链接
http://www.fyneworks.com/jquery/multiple-file-upload /
Use jquery multi file upload plugin. Its simple. Refer below link
http://www.fyneworks.com/jquery/multiple-file-upload/