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

html设置浏览上传照片

发布时间: 2022-09-20 21:59:25

1. html设置文件上传类型,如何设置在选择文件的时候只能选图片

可以直接设置input标签的accept属性来限制上传文件的类型

<input type="file" accept="application/msword" ><br><br>accept属性列表<br>12

1.accept=”application/msexcel”
2.accept=”application/msword”
3.accept=”application/pdf”
4.accept=”application/poscript”
5.accept=”application/rtf”
6.accept=”application/x-zip-compressed”
7.accept=”audio/basic”
8.accept=”audio/x-aiff”
9.accept=”audio/x-mpeg”
10.accept=”audio/x-pn/realaudio”
11.accept=”audio/x-waw”
12.accept=”image/gif”
13.accept=”image/jpeg”
14.accept=”image/tiff”
15.accept=”image/x-ms-bmp”
16.accept=”image/x-photo-cd”
17.accept=”image/x-png”
18.accept=”image/x-portablebitmap”
19.accept=”image/x-portable-greymap”
20.accept=”image/x-portable-pixmap”
21.accept=”image/x-rgb”
22.accept=”text/html”
23.accept=”text/plain”
24.accept=”video/quicktime”
25.accept=”video/x-mpeg2”
26.accept=”video/x-msvideo”

如果限制上传的文件为图片格式,则可以直接写成:accept = ‘image/*’;

2. 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>

3. 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、运行的结果是只能上传图片不能上传其他的文件,在弹出的上传选择对话框中也会值显示图片,如下图:

4. html怎么上传本机图片

如果只是做上传页面 只需要把HTML和图片放在同一个文件夹里面就可以了,
如果是要做上传功能,则需要建立一个服务器。

5. html上传图片怎么弄

可以将图片转base64,也可以直接当成文件上传。代码有点多,就不写了,如果实在不会就找插件吧

6. html图片怎么上传

和网页传送方式一样 比如你的html文件放在桌面,你的图片新建文件夹img 之后做完之后看一下路径是否正确,有的是需要你修改路径的,桌面添加默认为fttp:c\....等路径 把前面的删除 只留有文件夹以及文件名

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

8. HTML怎样写代码,才能让手机直接把照片上传到站点上。

其实这个很简单,现在的手机也支持<input type="file" >的
当然 form 要设置enctype="multipart/form-data"

后台接收,那就需要后台的知识了。

9. html怎么把网上的图片插入到自己的网页上

右击 后点击属性 出现了左边的图片,然后复制地址 到html的代码中就可以了 <img src="图片地址">

10. 在html页面里面制作一个上传图片的区域,就是点那个区域,就能上传照片,这个html代码应该怎么写

你好,html上传文件的代码如下:

<inputtype="file"name="fileUpload"/>
<inputtype="submit"value="上传文件"/>

至于你要说的有个区域显示图片的,这个需要配合前端开发才可以,单纯的html代码是做不到的,谢谢。