可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
‘贰’ 前端，图片上传点击 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);
};
‘叁’ web前端上传图片的几种方法
下面给你介绍3种web前端上传图片的方法：
1.表单上传
最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。
ajax无刷新上传
Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。
3.各类插件上传
当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完成。
如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等，大家可根据项目实际需求选择适合的插件。
‘肆’ 前端怎么传图片给后台（java）
你可以现在前台控制台打印一下base64的流，看看是否获取图片成功。如果成功再去后台看看获取的文件信息，haerd中是否有数据。
然后就是你没有后台代码，这里也不好判断是否是接收问题
‘伍’ 网站是用WordPress搭建的，在前段编辑页面上传图片完成后，前端页面代码没有显示alt，这是什么原因
你的站首页、文章页、普通页面，里面所有图片，你用chrome上浏览你的网站，右击图片审视元素，看里面的图片代码 一般正确的格式是这样的
<img src="图片链接地址" alt="图片名字">
alt这里就是要给图片起个名气，好让搜索引擎爬你的网站的时候知道这个图片叫神马，seo优化是必须要做好这一步的
上面那个朋友的方法，就是添加你的文章图片时的填上alt信息，但一般有些主题的自带图片是不会有alt信息，得你自己去编辑主题添加
‘陆’ 前端实现多图片上传获取到一个数组怎么在后台接受这个数组
// 这是一个嵌入到网页中动态显示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);
}
}
‘柒’ 前端批量上传图片后端怎么接收
循环啊 异步啊，直接转换成base64传到后台，后台循环解码，保存在文件夹里面不就可以了。
‘捌’ 前端使用form表单提交图片后，java后台怎么获取该图片
首先在html的form添加:enctype="multipart/form-data"
//Java代码
@RequestMapping("/upload")
publicStringaddUser(@RequestParam("file")CommonsMultipartFile[]files,HttpServletRequestrequest){
for(inti=0;i<files.length;i++){
System.out.println("fileName---------->"+files[i].getOriginalFilename());
if(!files[i].isEmpty()){
intpre=(int)System.currentTimeMillis();
try{
//拿到输出流，同时重命名上传的文件
FileOutputStreamos=newFileOutputStream("H:/"+newDate().getTime()+files[i].getOriginalFilename());
//拿到上传文件的输入流
FileInputStreamin=(FileInputStream)files[i].getInputStream();
//以写字节的方式写文件
intb=0;
while((b=in.read())!=-1){
os.write(b);
}
os.flush();
os.close();
in.close();
intfinaltime=(int)System.currentTimeMillis();
System.out.println(finaltime-pre);
}catch(Exceptione){
e.printStackTrace();
System.out.println("上传出错");
}
}
}
return"/success";
}
‘玖’ 求C#上传图片案例
这个要js 控制图片变化，上传可以新建一个类，上传方法参考
#region 上传文件
/// <summary>
/// 开始上传文件
/// </summary>
public string UpLoadStart(out bool success, out string savePathOut)
{
//标记是否成功
bool flag = false;
//返回的值
success = false;
savePathOut = "";
string returnvalue = "";
if (PostedFile != null)
{
string save_Path = "";
string saveName = "";
try
{
//获取文件路径
string fileName = PathToName(PostedFile.FileName);
if (filename == "")
{
returnvalue = "请选择文件,系统不允许进行下一步操作!";
}
else
{
fileName = filename;
string _fileName = "";
//判断是否限制后缀(扩展名)
if (IsLimit())
{
if (isGetExtension)
{
//从配置文件取出 扩展名集合
Extension = GetFileExtendsFromConfig();
}
//扩展名
string[] Exten = Extension.Split(',');
if (Exten.Length == 0)
{
returnvalue = "你未设置上传文件类型,系统不允许进行下一步操作!";
}
else
{
//遍历 后缀
for (int i = 0; i < Exten.Length; i++)
{
//判断文件名（含扩展名）末尾是否与 允许上传的扩展名集合相符
if (fileName.ToLower().EndsWith(Exten[i].ToLower()))
{
int fileLength = PostedFile.ContentLength;
if (fileLength > FileLength)
{
returnvalue = "上传文件限制大小:" + FileLength / 1024 + "kb！";
}
else
{
save_Path = System.Web.HttpContext.Current.Server.MapPath("~\\" + SavePath + "\\");
savePathOut = save_Path;
saveName = save_Path + fileName;
//如果没有 就创建目录
if (!Directory.Exists(save_Path)) { Directory.CreateDirectory(save_Path); }
//保存文件
PostedFile.SaveAs(saveName);
_fileName = fileName;
flag = true;
success = true;
returnvalue = saveName + ",大小为" + Common.NumberPlus.RemoveDecimalPoint(fileLength.ToString("N")) + "字节," + Convert.ToString(Math.Round((Convert.ToDecimal(fileLength) / 1024 / 1024), 2)) + "M";
//decimal类型具有更高的精度和更小的范围，这使它适合于财务和货币计算
}
}
}
if (flag == false)
returnvalue = "只允许上传" + Extension + " 文件!";
}
}
else
{
//不限制后缀的情况
if (PostedFile.ContentLength > FileLength)
{
returnvalue = "上传文件限制大小:" + FileLength / 1024 + "kb！";
}
else
{
save_Path = System.Web.HttpContext.Current.Server.MapPath("~\\" + SavePath + "\\");
savePathOut = save_Path;
saveName = save_Path + fileName;
//如果没有 就创建目录
if (!Directory.Exists(save_Path)) { Directory.CreateDirectory(save_Path); }
PostedFile.SaveAs(saveName);
_fileName = fileName;
success = true;
returnvalue = saveName + ",大小为" + Common.NumberPlus.RemoveDecimalPoint(fileLength.ToString("N")) + "字节," + Convert.ToString(Math.Round((Convert.ToDecimal(fileLength) / 1024 / 1024), 2)) + "M";
}
}
}
}
catch (System.Exception exc)
{
returnvalue = exc.Message + "(" + saveName + ")";
}
}
else
{
returnvalue = "上文件失败!";
}
return returnvalue;
}
#endregion
‘拾’ 前端上传文件的几种方法
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请求的正文内容。