input type="file"多图片上传

单个的input type="file"表单也是可以实现多图片上传的

代码如下:

<form action="manypic.php" method="post" enctype="multipart/form-data">
        <input type="file" name="manypic[]" multiple>
        <input type="submit">
    </form>

这里要给file表单加上一个multiple属性 multiple="multiple"也可以

name的属性值后面要加上[]这样就可以了  print_r($_FILES)可得到如下信息:

Array
(
    [manypic] => Array
        (
            [name] => Array
                (
                    [0] => 1.png
                    [1] => bg.jpg
                )

            [type] => Array
                (
                    [0] => image/png
                    [1] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => D:\xampp\tmp\php8C53.tmp
                    [1] => D:\xampp\tmp\php8C54.tmp
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )

            [size] => Array
                (
                    [0] => 44113
                    [1] => 325257
                )
     )
)这里我上传的是两张图片另外你也可以提交多个input type="file"上传域,代码如下:    <form action="manypic.php" method="post" enctype="multipart/form-data">        <input type="file" name="pic1">        <input type="file" name="pic2">        <input type="submit">    </form>php页面的print_r的打印结果:
Array
(
    [pic1] => Array
        (
            [name] => bg.jpg
            [type] => image/jpeg
            [tmp_name] => D:\xampp\tmp\phpF661.tmp
            [error] => 0
            [size] => 325257
        )

    [pic2] => Array
        (
            [name] => 1.png
            [type] => image/png
            [tmp_name] => D:\xampp\tmp\phpF671.tmp
            [error] => 0
            [size] => 44113
        )
)
 
时间: 2024-08-10 21:22:55

input type="file"多图片上传的相关文章

ajaxfileupload.js结合input[type=file]无刷新上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 说明: 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,data

input type=&quot;file&quot; accept=&quot;image/*&quot;上传文件慢的问题解决办法

相信大家都写过<input type="file" name="file" class="element" accept="image/*"> 默认过滤掉所有非图片文件: 这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框.简直不能忍呀. 在IE和Firefox中使用 accept="image/*" 属性则没有发现响应

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

jQuery File Upload 图片上传解决方案兼容IE6+

1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ====================== 3.修改basic.html 如下: 1.cdn 静态引用修改 2.ajax提交路径修改 ====&&& 其他demo页面修改同理 =======: 下面修改完了以后.如下所示: <!DOCTYPE HTML><!--/* * jQuery File Up

HTML5学习笔记(2):input type file的特性

一. input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file> 但是,为了习惯,我们多写成: <input type="file"> 在HTML5出现之前(XHTML),我们的闭合规则则有些出入: <input type="file" /> 顾名思义,选择文件,并上传文件. 在HTML5还没有出现之前,

HTML input type=file文件选择表单的汇总(一)

HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题. 最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因: 现解释如下: input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可:    event.ta

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

视频(其他)下载+tomcat 配置编码+图片上传限制大小

视频下载:前台 jsp function downVideo(value,row,index){ return '<a href="<%=basePath%>admin/video/video!fileDown.ds?uname='+row.uname+'&filepath='+value+'">下载</a>'; } 后台java : action: public void fileDown() { FileUtil.download(fil