当前位置:首页 » 文件传输 » 表单图片上传
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

表单图片上传

发布时间: 2022-02-05 19:19:27

⑴ 我该怎样将form 内的<input type="file" name="myimg">上传标签,将图片上传到我的html页面,用html代码写

HTML没有处理这种文件的功能,所以你只使用HTML是不能实现的。如果你不使用服务器端语言,只是想要这个效果,可以尝试使用JS来做,就是用JS获取你的input中的值,然后去查找这个文件,添加一个链接,链接的指向是你所要上传的文件,或者通过JS把文件移动到你想指定的地方,这都可以。
但这个时候其实不需要提交的,只需要一个动作触发JS就可以了,当然你也可以提交,在提交的时候来触发这个操作,但记得,JS操作一定要在提交前完成,要不然你就没办法获取这个值了。
我只提供一个思路,自己没有试过,你可以再想想。如果有服务端的脚本语言,你这个问题就很好解决了。

⑵ 用javaScript编写 上传图片 并在表单指定位置显示所上传图片代码

需要网站提供上传接口才可以,javascript是能完成前端交互。后端的事它做不了。

⑶ web前端上传图片的几种方法

下面给你介绍3种web前端上传图片的方法:

1.表单上传

最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的。

ajax无刷新上传

Ajax无刷新上传的方式,本质上与表单上传无异,只是把表单里的内容提出来采用ajax提交,并且由前端决定请求结果回传后的展示结果。

3.各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等,这时传统的表单上传很难实现这些功能,我们可以借助现有插件完成。

如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合的插件。

⑷ 上传图片表单赋值问题

form 里面加 name="editForm"
或者将JS里的 editForm 改成 你 form name="myform" 之类

例:

<form name="editForm" method="post" action="ProctEdit.asp?Action=SaveEdit&Result=<%=Result%>&ID=<%=ID%>">

折磨我半天 妈的....

⑸ 怎样将上传的图片文件和表单其它数据一起提交解决办法

比如要获取一个人的姓名,年龄…… 加上选择的上传图片
我用的是SmartUpload组件,在表单中非得加上 ENCTYPE="multipart/form-data" 属性
不加图片上传不了,加了,其它数据有获取不到,所以,有大虾能帮忙解决一下
------解决方案--------------------------------------------------------可以引用commons-fileupload包
在Servlet中这样使用:
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload diskFileUpload = new ServletFileUpload(factory);
// 定义一个HashMap,存放请求参数
Map<String, String> parameters = new HashMap<String, String>();
// 得到所有的文件,以及其它请求参数:
List<?> fileItems = diskFileUpload.parseRequest(request);
Iterator<?> i = fileItems.iterator();
// 依次处理每一个文件,以及请求参数:
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
// 如果是文件,进行上传操作
if (!fi.isFormField()) {
}else{// 如果是请求参数
String name = fi.getFieldName();
String value = fi.getString();
......}}------解决方案--------------------------------------------------------可以提交表单的啊~这个不影响~你得不到表单信息仔细看看是不是哪里错了

⑹ jquery多图片上传(form表单序列化提交)为啥后台只获取一个图片文件

首先,文本类的可以放在request中通过request.getAttribute(name)获取。图片你在前端放地址,后端也是像前面通过request.getAttribute(name)获取后存入数据库。这是jsp+servlet的做法。jsp有九大内置对象用于传递数据。而你如果用spring+springmvc的话是通过参数绑定来传递数据的。详细的你可以了解框架文档。建议你选择一种框架可以便捷开发。jsp+servlet是比较原始的处理方式。

⑺ HTML表单的POST上传方式

是<form></form>之间的内容,例如:<form action="/search" name="search-form" method="post" id="search-form" class="search-form">,其中method就是上传的方式。

⑻ html 表单上传图片

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

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

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

  4. 在代码中插入一个表单

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

    <body>

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

    </body>

  6. 接下来在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>

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

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

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

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

  10. 好了,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;

    }

    }

    }

    ?>

  11. 代码分析:

    $_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,表示上传失败,显示失败信息。

  12. 完成的代码如下:

    <!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>

⑼ 用表单上传图片应怎么做啊用PHP

<?php
set_time_limit(0);
define('ROOT',dirname(__FILE__).'/');
if($_POST['submit']){
foreach ($_FILES['upfile']['tmp_name'] as $k=>$v){
!$v || (!file_exists(ROOT.'/upload/'.$_FILES['upfile']['name'][$k]) && @getimagesize($v) && @move_uploaded_file($v,ROOT.'/upload/'.$_FILES['upfile']['name'][$k]) && print ('上传'.$_FILES['upfile']['name'][$k].'成功<br /><img src="'.$site['url'].'upload/upload/'.$_FILES['upfile']['name'][$k].'" />') )|| print ('上传'.$_FILES['upfile']['name'][$k].'失败<br />');
}
}
?>
<html>
<head>
<title>上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">body,td{font-family:tahoma,verdana,arial;font-size:11px;line-height:15px;background-color:white;color:#666666;margin-left:20px;}
strong{font-size:12px;}
a:link{color:#0066CC;}
a:hover{color:#FF6600;}
a:visited{color:#003366;}
a:active{color:#9DCC00;}
table.itable{}
td.irows{height:20px;background:url("index.php?i=dots") repeat-x bottom}</style>
<script language="JavaScript">
function adpload() {
document.all.upload.innerHTML = '<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br /><input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br />'+document.all.upload.innerHTML;
}
</script>
</head>
<body>
<center><form enctype="multipart/form-data" method="post" name="upform">
上传图片:按上传按纽,上传成功后可以直接粘贴图片于编辑器中 <br><br>
<a href='#' onClick="adpload()">增加上传文件</a><br><br>
<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br>
<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br>
<div id="upload"></div>
<input type="submit" name="submit" value="上传" style="width:30;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br><br><br>
<br><br>
<a href="index.php">返回</a><br />
</form>
</center>
</body>
</html>

⑽ form 表单上传图片,怎样获取图片的全路径

上传一成功的一瞬间是放到系统临时目录下的,你要通过move_uploaded_file来移动到有效目录内,如果要操作临时上传目录 ,上传时通过var_mp($_FILE)能看到的。不过意义不大哈。