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

前端上传图片

发布时间: 2022-02-24 05:25:37

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

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

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

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

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

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

1.表单上传

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

ajax无刷新上传

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

3.各类插件上传

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

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

㈢ 前端怎么传图片给后台(java)

你可以现在前台控制台打印一下base64的流,看看是否获取图片成功。如果成功再去后台看看获取的文件信息,haerd中是否有数据。
然后就是你没有后台代码,这里也不好判断是否是接收问题

㈣ 前端批量上传图片后端怎么接收

循环啊 异步啊,直接转换成base64传到后台,后台循环解码,保存在文件夹里面不就可以了。

㈤ 怎么把图片从前端上传到服务器

用FTP工具上传。

㈥ 前端,图片上传点击 input type=file 选择好了想要上传的图片,点击打开,

你是要传到服务器的话那就是后台实现。

如果不传到服务器在页面上不能直接显示出来,系统有限制。 但是在大部分的手机浏览器里面是可以直接读取。

例如下面这段直接加载本地选择的图片地址,会报错:Not allowed to load local resource

意思是不允许读取本地资源。

varfileupload=document.getElementById('upload');

fileupload.onchange=function(event){
varimg=document.createElement('img');
img.src=this.value;
document.body.appendChild(img);
};

㈦ 前端实现多图片上传获取到一个数组怎么在后台接受这个数组

// 这是一个嵌入到网页中动态显示50是张图片的java小应用程序,希望你对有帮助!
import java.awt.*;

import java.applet.*;
public class Picture extends Applet
{
Image[] theImages;
int nNum = 50;
int nNow = 0;

public void init()
{
theImages = new Image[nNum];
for(int i = 0; i < nNum ; i++)//将图片装入数组
theImages[i] = getImage(getDocumentBase(), "pic" + Integer.toString(i) + ".jpg");
}
public void start()
{
nNow = 0;
}
public void paint(Graphics g)
{
g.drawImage(theImages[nNow],500,500,this);
nNow++;
if(nNow>=nNum)
nNow = 0;
try
{
Thread.sleep(50);
}
catch(Exception e){showStatus(e.toString());}
repaint();
}
public void main()
{
Graphics g;
g=this.getGraphics ();
init();
start();
paint(g);

}
}

㈧ 我想实现 html +js 上传图片 并保存到本地tmp目录下,现有代码如下,求指导。必采纳

你js代码把文件以base64编码形式展示了出来,是为了让用户上传文件之前能够预览对吧。


文件的IO操作需要用后端来实现,如果你只是做web前端开发的话,就没有必要研究这个东西,如果你是后端开发者的话可以尝试一下,相关的资料很多,我写个示例吧,后端用php为例:

html实现:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>ss</title>
</head>
<body>
<formaction="file.php"method="post"enctype="multipart/form-data">
<inputtype="file"name="upfile">
<inputtype="submit"value="提交">
</form>
</body>
</html>

php实现(file.php):

<?php
@header('Content-Type:text/html;charset=utf-8');
if(!isset($_FILES['upfile'])){
exit('请选择您要上传的文件!');
}

if(!file_exists($_FILES['upfile']['tmp_name'])){
exit('您要上传的文件不存在!');
}

$file_dir=dirname(__FILE__).'/tmp';
if(!is_file($file_dir)){
@mkdir($file_dir,0777,true);
}

$file_ext='.jpg';
if(preg_match('/(.w+)$/',$_FILES['upfile']['name'],$ext_tmp)){
$file_ext=$ext_tmp[1];
}

$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext;

@rename($_FILES['upfile']['tmp_name'],$file_save_path);

if(!file_exists($file_save_path)){
exit('文件上传失败!');
}

exit('文件上传成功!');

㈨ 前端上传文件的几种方法

1.表单上传

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

form表单上传

表单上传需要注意以下几点:

(1).提供form表单,method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群:453833554

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请求的正文内容。

㈩ 用html做上传图片时,怎样限制上传图片的尺寸

<script>

var img=null;

function s()

{

if(img)img.removeNode(true);

img=document.createElement("img");

img.style.position="absolute";

img.style.visibility="hidden";

img.attachEvent("onreadystatechange",orsc);

img.attachEvent("onerror",oe);

document.body.insertAdjacentElement("beforeend",img);

img.src=inp.value;

}

function oe()

{

alert("cant load img");

}

function orsc()

{

if(img.readyState!="complete")return false;

alert("图片大小:"+img.offsetWidth+"X"+img.offsetHeight);

alert("图片尺寸:"+img.fileSize);

}

</script>

<input id=inp type="file">

<br>

<button onclick="s()">Test</button>