html 表单上传图片

Posted 2023-04-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 表单上传图片相关的知识，希望对你有一定的参考价值。

html的表单上传图片到指定服务器，在同页面加了个iframe为target时，能实现上传，但是当吧target和iframe去掉时后台就收不到$_FILES这个数组了求解原因？？？form上传机制是啥？？？

使用表单中的文件域（<input type="file".../>）控件可以上传文件。

打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。

保存到网站目录下，命名为upload.php。

在代码中插入一个表单

对话框中，操作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：

<body>

</body>

接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。

结果如下：

<body>

<label>选择图片文件</label>

</form>

</body>

不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下

代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。

accept属性表示点击“浏览...”按钮时，弹出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性，有些浏览器并不支持。比如在IE9中，此属性不起任何作用。在chrome中，此属性起作用。

如果想支持所有的图像文件，accept值可以设置为“image/*”，在chrome中，文件类型显示

好了，html代码就写完了，因为action=""，表示点击上传按钮时，将表单提交给自身，因此，我们还要添加接收表单的处理代码。

代码如下：

<?php

if (isset($_FILES['imgfile'])

&& is_uploaded_file($_FILES['imgfile']['tmp_name']))

$imgFile = $_FILES['imgfile'];

$imgFileName = $imgFile['name'];

$imgType = $imgFile['type'];

$imgSize = $imgFile['size'];

$imgTmpFile = $imgFile['tmp_name'];

move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);

$validType = false;

$upRes = $imgFile['error'];

if ($upRes == 0)

if ($imgType == 'image/jpeg'

|| $imgType == 'image/png'

|| $imgType == 'image/gif')

$validType = true;

if ($validType)

$strPrompt = sprintf("文件%s上传成功<br>"

. "文件大小: %s字节<br>"

. "<img src='upfile/%s'>"

, $imgFileName, $imgSize, $imgFileName

);

echo $strPrompt;

代码分析：

$_FILES是一个数组变量，用于保存上传后的文件信息。

$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后，上传的文件的信息。

一个上传的文件，有以下属性信息：

'name'：上传的文件在客户端的名称。

'type'：文件的 MIME 类型，例如"image/jpeg"。

'size'：已上传文件的大小，单位为字节。

'tmp_name'：上传时，在服务器端，会把上传的文件保存到一个临时文件夹中，可以通过此属性得到临时文件名。

'error'：文件在上传过程中的错误代码。如果上传成功，此值为0，其它值的意义如下：

1：超过了php.ini中设置的上传文件大小。

2：超过了MAX_FILE_SIZE选项指定的文件大小。

3：文件只有部分被上传。

4：文件未被上传。

5：上传文件大小为0。

代码中首先判断$_FILES['imgfile']变量是否存在，如果存在，并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了，判断error属性，如果属性为0，把上传后的图像从临时文件夹移到upfile文件夹中，显示上传文件的信息，并显示上传后的图像。

如果error值不为0，表示上传失败，显示失败信息。

完成的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>上传图片文件</title>

</head>

<?php

if (isset($_FILES['imgfile'])

&& is_uploaded_file($_FILES['imgfile']['tmp_name']))

$imgFile = $_FILES['imgfile'];

$upErr = $imgFile['error'];

if ($upErr == 0)

$imgType = $imgFile['type']; //文件类型。

/* 判断文件类型，这个例子里仅支持jpg和gif类型的图片文件。*/

if ($imgType == 'image/jpeg'

|| $imgType == 'image/gif')

$imgFileName = $imgFile['name'];

$imgSize = $imgFile['size'];

$imgTmpFile = $imgFile['tmp_name'];

/* 将文件从临时文件夹移到上传文件夹中。*/

move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);

/*显示上传后的文件的信息。*/

$strPrompt = sprintf("文件%s上传成功<br>"

. "文件大小: %s字节<br>"

. "<img src='upfile/%s'>"

, $imgFileName, $imgSize, $imgFileName

);

echo $strPrompt;

else

echo "请选择jpg或gif文件，不支持其它类型的文件。";

else

echo "文件上传失败。<br>";

switch ($upErr)

case 1:

echo "超过了php.ini中设置的上传文件大小。";

break;

case 2:

echo "超过了MAX_FILE_SIZE选项指定的文件大小。";

break;

case 3:

echo "文件只有部分被上传。";

break;

case 4:

echo "文件未被上传。";

break;

case 5:

echo "上传文件大小为0";

break;

else

/*显示表单。*/

<body>

<label>选择图片文件</label>

</form>

</body>

<?php

</html>

追问

和我问的并没有关系(￢_￢)

参考技术A 用表单bai中的文件域（<input type="file".../>）控件可以上du传文件。zhi

打开DreamWeaver，这里使用dao的版本是CS6，新建一个php文件。

保存到网站目录下，命名为upload.php。

在代码中插入一个表单

对话框中，操作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：

<body>

<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>

</body>

接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。

结果如下：

<body>

<form action="" method="post" enctype="multipart/form-data" name="upload_form">

<label>选择图片文件</label>

<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>

<input name="upload" type="submit" value="上传" />

</form>

</body>

不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下

代码中，重要的是名为img 参考技术B 这和iframe target 一点关系都没有，请查看其他原因追问

但是改了有了就可以没有就是不可以。。。是不是域的问题？两个文件都在本地化能正常实现加不加无所谓

参考技术C

html表单这样上传图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

一、html在表单元素中这样添加背景图

用户名:<input type="text" name="user" style="background: url(图片路径)" /><br/>
密码: <input type="password" name="mima" style="background: url(图片路径)" /><br/>
<input type="submit" value="确定" style="background: url(图片路径)" />　　
<input type="reset" value="取消" style="background: url(图片路径)" />

jquery mobile 表单提交图片/文件上传

jquerymobile 下面 form 表单提交和普通html没区别，最主要是 <form 要加一个 data-ajax=‘false‘ 否则上传会失败

1 html代码

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquerymobile1.4.0-green/zms-green.css"/>
<link rel="stylesheet" href="jquerymobile1.4.0-green/jQuery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquerymobile1.4.0-green/jquery.mobile.structure-1.4.0.css" />

<link rel="stylesheet" href="css/my.css" />

<script src="commond-plug/jquery.min.js" type="text/JavaScript"></script>
<script src="jquerymobile1.4.0-green/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<title>HTML-ZMS</title>
<script>
$(document).ready(function () {

});
</script>

<stytle>

</stytle>
</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
<h1>Jquery mobile 1.4</h1>

</div>

<div class="ui-content">
<div class="file-box">
<form action="../servlet/phonegapUp" method="post" enctype="multipart/form-data" data-ajax="false">

<input type="text" id="zms" name="zms">
<input type="text" id="value1" name="value1">
<input type="text" id="value2" name="value2">

<input type="file" accept="image/png" name="fileField" id="fileField" />

<input type="submit" name="submit" class="btn" value="上22传" />
</form>
</div>
</div>

<div data-role="footer" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
<h4>中兴长天（南昌）信息技术有限公司</h4>
</div>

</div>

</body>
</html>

2 服务端代码新建一个servlet，修改 dopost代码

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
Date date = new Date();//获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
//SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
String newfileName = sdfFileName.format(date);//文件名称
String fileRealPath = "";//文件存放真实地址

String firstFileName="";

// 获得容器中上传文件夹所在的物理路径如果按日期存放，则可以在files\\后面继续加 sdFolder+"\\"
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "files\\";
/* System.out.println("路径" + savePath+"; name:"+name); */
System.out.println("路径" + savePath);
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdirs();
}

try {
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
  FileItem obit = (FileItem)it.next();
//如果是普通表单参数

if(obit.isFormField()){ //普通域,获取页面参数
String field = obit.getFieldName();

if(field.equals("value1"))
{
  System.out.println(obit.getString("UTF-8"));

}
else if(field.equals("value2")){

  System.out.println(obit.getString("UTF-8"));

}
}
// 如果是多媒体

if(obit instanceof DiskFileItem){
DiskFileItem item = (DiskFileItem) obit;
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + newfileName + formatName;//文件存放真实地址

BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
//上传成功，
if (new File(fileRealPath).exists()) {
//虚拟路径赋值
// fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
//保存到数据库
System.out.println("上传成功了，您还可以做其他操作");

//System.out.println("虚拟路径:"+fileRealResistPath);
response.getWriter().write(fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1));
}

}
}
}
} catch (org.apache.commons.fileupload.FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
/* response.getWriter().write("1"); */
}

data-ajax="false" 是重点，终于解决了

以上是关于html 表单上传图片的主要内容，如果未能解决你的问题，请参考以下文章

php表单上传图片到七牛云存储并返回地址……求具体流程～有代码更好

通过 ajax POST 上传图片而不使用 HTML 表单

html 表单上传图片

jquery mobile 表单提交 图片/文件 上传

jquery mobile 表单提交图片/文件上传