htmlform文件上传
⑴ html设置文件上传类型,如何设置在选择文件的时候只能选图片
可以设置一下html中的accept属性以实现上传文件类型的筛选，accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
工具原料：编辑器、浏览器
1、设置一个文件上传选项，删选一下只能上传图片或者详细的限制只能上传图片的某些格式，代码如下：
<!DOCTYPEhtml>
<html>
<body>
<formaction="demo_form.asp">
<inputtype="file"name="pic"accept="image/*">
<inputtype="submit">
</form>
<p><strong>注释：</strong>InternetExplorer9以及更早的版本不支持input标签的accept属性。</p>
<p><strong>注释：</strong>鉴于安全考虑，该例不允许您上传文件。</p>
</body>
</html>
2、运行的结果是只能上传图片不能上传其他的文件，在弹出的上传选择对话框中也会值显示图片，如下图：
⑵ form表单提交上传图片
上传图片我首先想到的是利用这个插件，webupload LUploade这类插件大多支持图片预览，断点/分片上传，功能比较丰富，但是由于后台原因我需要利用form表单进行上传图片，所以就整理了一下关于图片上传的几种方式：
1.form表单上传图片
表单上传遇到了一下几个问题：
（1）进行表单提交时，无法获取返回值
（2）表单提交会进行页面刷新
为了解决这个问题，我想到了利用iframe进行解决，在form元素上直接添加target属性，使提交跳转页面直接跳转到iframe中，阻止页面进行跳转，返回结果也会呈现在 iframe框架之中，我们可以去除iframe中的返回值，前提是必须在同一个域名下。这样我们获取返回值就会拥有局限性。还好我反降了另外一种方法，jquery中jqueryj.form.js表单提交插件。我们可以直接这样来获取表单返回值。
form表单提交注意事项：
(1).提供form表单，method必须是post。
(2).form表单的enctype必须是multipart/form-data。
javascript学习交流群：4538335s's's's'sssssssssssssss54
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：
application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。
multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。
默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：
method=’get’ 编码后的表单内容附加在请求连接后，
method=’post’ 编码后的表单内容作为post请求的正文内容。
(3).提供input type="file"上传输入域。
2.ajax无刷新上传
ajax和FormData可实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的
FormData接口。通过FormData对象可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。
ajax无刷新上传
Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。
3.各类插件的使用：
webupload LUPloader
⑶ HTML选择不同选项上传到不同的文件夹
是为这个选项框添加一个javascript事件函数，对选项框作出选择就会触发事件，在事件函数里根据选项的不同决定跳转的地址。
是选项框选择时先不跳转，点击提交的时候才进行跳转，这个需要在提交按钮上添加一个提交前事件，同样是javascript，在javascript函数里实现跳转。
第三种是动态web，在form里指定一个action，跳转到一个处理页面上，在这个页上通过获取request的请求参数来决定跳转到哪个地址。
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
HTML是由Web的发明者Tim BernersLee和同事 Daniel WConnolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台UNIX，Windows等，使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，即现在所见到的网页。
⑷ html上传文件代码
在HTML标准中，XMLHttpRequest对象被重新定义，被称为“XMLHttpRequest Level 2”，其中包含了以下5个新特性：
1、支持上传、下载字节流，比如文件、blob以及表单数据。
2、增加了上传、下载中的进度事件。
3、跨域请求的支持。
4、允许发送匿名请求（即不发送HTTP的Referer部分）。
5、允许设置请求的超时。
在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。
上面图示的就是我们能够实现的内容：
1、显示上传的文件信息，比如文件名、类型、尺寸。
2、一个能够显示真实进度的进度条。
3、上传的速度。
4、剩余时间的估算。
5、已上传的数据量。
6、上传结束后服务器返回的响应。
另外，凭借XMLHttpRequest，我们的上传过程整个都是异步的，因此用户在上传文件的时候，依然可以操作网页当中的其它元素，并不需要专门等待上传的完成。而在上传结束后，我们能够获取服务器发回的响应，因此整个上传过程都显得相当顺理成章。
⑸ html 表单上传图片
使用表单中的文件域（<input type="file".../>）控件可以上传文件。
打开DreamWeaver，这里使用的版本是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中的预览效果都要看一下
代码中，重要的是名为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">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<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>
<?php
}
?>
</html>
⑹ html网页上传文件的完整代码
html前端代码：
<html>
<body>
<formaction="upload-file.php"method="post"
enctype="multipart/form-data">
<labelfor="file">文件名:</label>
<inputtype="file"name="file"id="file"/>
<br/>
<inputtype="submit"name="submit"value="提交"/>
</form>
</body>
</html>
如果是ubuntu上部署apache2，你应该是php开发者吧，action="upload-file.php
" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可！
这里提供upload-file.php后端接收文件的代码：
<?php
if($_FILES["file"]["error"]>0)
{
echo"错误:".$_FILES["file"]["error"]."<br/>";
}
else
{
echo"文件名:".$_FILES["file"]["name"]."<br/>";
echo"类型:".$_FILES["file"]["type"]."<br/>";
echo"大小:".($_FILES["file"]["size"]/1024)."Kb<br/>";
}
if(file_exists("upload/".$_FILES["file"]["name"]))
{
echo$_FILES["file"]["name"]."文件已经存在.";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/".$_FILES["file"]["name"]);
echo"文件已经被存储到:"."upload/".$_FILES["file"]["name"];
}
?>
代码很简单，我相信你应该能看懂，这里的 文件夹 upload/ 需要你自己手动创建，请确保文件路径正取！
我也是web开发者，有问题可继续追问我！或是加我工作室QQ(540144097)，在群里向我提问！有问必答，望采纳......
⑺ HTML表单的POST上传方式
是<form></form>之间的内容，例如：<form action="/search" name="search-form" method="post" id="search-form" class="search-form">，其中method就是上传的方式。
⑻ 跪求高手 在html中 用form上传一个文件到服务器 然后用php读取出来。html文件和php文件分别怎么写谢谢啦
告诉你一个思路,
简单归纳如下三个部分即可实现
.
////存储的部分
<?
if($_FILE[文件名])
{
$destFilename=指定目录/文件名;
($_FILE[文件名],$destFilename);
}
?>
<?
//php读出部分,
这里可以有多个.如果是图片文件的,可以直接使用HTML的<IMG
src=相对URI图片路径>标记
//如果是其它如WORD/EXCEL/PDF这类的.你就要用一个<IFRAME
src=文件
高/宽设定>
?>
//////////上传的部分
<form
method="POST"
>
<input
type=file
name=文件变量>
<input
type=submit>
</form>
⑼ 如何成功上传HTML文件
HTML中使用input type="file"上传文件时，代码中只能得到文件的名称，而有些特殊的需要要求得到上传文件的绝对路径，为此采用Javascript实现得到文件的绝对路径。
<form name="thisform" method="post"
action="<%=request.getContextPath()%>/movieManage.do" id="thisform" enctype="multipart/form-data">
<input type="file" name="theFile" onchange="document.getElementById('theFilePath').value=this.value"/>
<input type="hidden" id="theFilePath" name="theFilePath" value="">
</form>
注意：要有enctype="multipart/form-data"
Action代码：
String filePath = request.getParameter("theFilePath");
filePath既是上传文件的绝对路径。
浏览器中测试：
Firefox和IE中可以得到绝对路径。
⑽ html表单怎么上传图片
html表单这样上传图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片</title>
</head>