mvc上传图片并显示
㈠ mvc视图中怎么上传图片并显示
直接用 <input type="file"/>
controller 用HttpPostedFile 接受存到固定目录，然后把文件名和目录存数据库，显示就是读取数据库的目录。
㈡ MVC图书管理实现上传图片功能
展开全部
如果只是上传的话那太容易了，如果还要显示那就难了，因为要显示的话就不能只向服务器提交一次请求，必须异步提交。下面的例子是我亲自写的，异步提交上传图片并预览。全部代码都在。
首先建一个html文件，复制以下html文本。使用说明：
引用jquery两个js文件，网上自己搜吧，到处都有。
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
2.添加两个文本框，第一个ID必须是“bigImage1”，第二个必须是“smallbigImage1”。
<input type="text" name="url1" id="bigImage1" style="width:150px;" onclick="selectImage(this)" />
<input type="hidden" name="smallUrl1" id="smallbigImage1" value="" />
当点击第一个文本框时，弹出一个上传窗口，选择一张图片并点“上传”，上传成功后可预览图片。此过程会在服务器上把原图片生成一张缩略图，并把原图URL和缩略图URL一起以JSON格式返回到前台页面，临时显示缩略图。当点击“确定”时，它会把两个URL添加到两个对应ID的文本框。第二个框是隐藏的，给用户的感觉就像是只返回一个URL一样。
㈢ MVC怎么把图片显示出来
src 后面把图片储存的全部路径，/img/r_logo.png 还不全 获取img 所在的根目录再把/img/r_logo.png 拼接上
㈣ .net mvc用uploadify 插件上传图片上FTP，上传成功之后怎么把图片显示在前台页面
你能获取到图片对象吗？
Javascript
文件流. FileReader
======================================================================
///创建一个文件读取对象
var reader = new
FileReader();
//监听Onload完成
reader.onload =
function(e){$('#img1').attr('src',e.target.result)}
//
function
(e){$('#img1').attr('src',e.target.result)}
//读取Url
reader.readAsDataURL(data.files[0])
这样就可以获取到bit64格式的url 直接当成Url就行了。
㈤ 如何在spring mvc中上传图片并显示出来
（1）在spring mvc的配置文件中配置：
<beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<propertyname="uploadTempDir"value="/tmp"/><!--临时目录-->
<propertyname="maxUploadSize"value="10485760"/><!--10M-->
</bean>
（2）文件上传表单和结果展示页fileupload.jsp：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglibprefix="mvc"uri="http://www.springframework.org/tags/form"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>SpringMVC文件上传</title>
</head>
<body>
<h2>图片文件上传</h2>
<mvc:formmodelAttribute="user"action="upload.html"
enctype="multipart/form-data">
<table>
<tr>
<td>用户名：</td>
<td><mvc:inputpath="userName"/></td>
</tr>
<tr>
<td>选择头像：</td>
<td><inputtype="file"name="file"/></td>
</tr>
<tr>
<tdcolspan="2"><inputtype="submit"value="Submit"/></td>
</tr>
</table>
</mvc:form>
<br><br>
<c:iftest="${u!=null}">
<h2>上传结果</h2>
<table>
<c:iftest="${u.userName!=null}">
<tr>
<td>用户名：</td>
<td>${u.userName}</td>
</tr>
</c:if>
<c:iftest="${u.logoSrc!=null}">
<tr>
<td>头像：</td>
<td><imgsrc="${u.logoSrc}"width="100px"height="100px"></td>
</tr>
</c:if>
</table>
</c:if>
</body>
</html>
（3）后台处理UploadController.java：
packagecn.zifangsky.controller;
importjava.io.File;
importjava.io.IOException;
importjavax.servlet.http.HttpServletRequest;
importorg.apache.commons.io.FileUtils;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.multipart.MultipartFile;
importorg.springframework.web.servlet.ModelAndView;
importcn.zifangsky.model.User;
importcn.zifangsky.utils.StringUtile;
@Controller
publicclassUploadController{
@RequestMapping(value="/form")
publicModelAndViewform(){
ModelAndViewmodelAndView=newModelAndView("fileupload","user",newUser());
returnmodelAndView;
}
@RequestMapping(value="/upload",method=RequestMethod.POST)
publicModelAndViewupload(Useruser,@RequestParam("file")MultipartFiletmpFile,HttpServletRequestrequest){
ModelAndViewmodelAndView=newModelAndView("fileupload");
if(tmpFile!=null){
//获取物理路径
StringtargetDirectory=request.getSession().getServletContext().getRealPath("/uploads");
StringtmpFileName=tmpFile.getOriginalFilename();//上传的文件名
intdot=tmpFileName.lastIndexOf('.');
Stringext="";//文件后缀名
if((dot>-1)&&(dot<(tmpFileName.length()-1))){
ext=tmpFileName.substring(dot+1);
}
//其他文件格式不处理
if("png".equalsIgnoreCase(ext)||"jpg".equalsIgnoreCase(ext)||"gif".equalsIgnoreCase(ext)){
//重命名上传的文件名
StringtargetFileName=StringUtile.renameFileName(tmpFileName);
//保存的新文件
Filetarget=newFile(targetDirectory,targetFileName);
try{
//保存文件
FileUtils.InputStreamToFile(tmpFile.getInputStream(),target);
}catch(IOExceptione){
e.printStackTrace();
}
Useru=newUser();
u.setUserName(user.getUserName());
u.setLogoSrc(request.getContextPath()+"/uploads/"+targetFileName);
modelAndView.addObject("u",u);
}
returnmodelAndView;
}
returnmodelAndView;
}
}
在上面的upload方法中，为了接收上传的文件，因此使用了一个MultipartFile类型的变量来接收上传的临时文件，同时为了给文件进行重命名，我调用了一个renameFileName方法，这个方法的具体内容如下：
/**
*文件重命名
*/
(StringfileName){
StringformatDate=newSimpleDateFormat("yyMMddHHmmss").format(newDate());//当前时间字符串
intrandom=newRandom().nextInt(10000);
Stringextension=fileName.substring(fileName.lastIndexOf("."));//文件后缀
returnformatDate+random+extension;
}
注：上面用到的model——User.java：
packagecn.zifangsky.model;
publicclassUser{
privateStringuserName;//用户名
privateStringlogoSrc;//头像地址
publicStringgetUserName(){
returnuserName;
}
publicvoidsetUserName(StringuserName){
this.userName=userName;
}
publicStringgetLogoSrc(){
returnlogoSrc;
}
publicvoidsetLogoSrc(StringlogoSrc){
this.logoSrc=logoSrc;
}
}
至此全部结束
效果如下：
（PS：纯手打，望采纳）
㈥ asp.net如何实现mvc上传图片并显示进度条呢
那个要做FLASH来实现。asp.net实现不了。
㈦ asp.net mvc3怎么上传图片和显示图片
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using PersonalWebSite.UI.Common;
namespace PersonalWebSite.UI
{
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"ArticleClassification", // 导航路由(带参数)
"article_{classificationId}_{pageCount}_{pageIndex}
㈧ mvc视图中怎么上传图片并显示
最简单的使用input file异步上传，或者直接使用 uploadify 非常好的一个上传插件，异步，多任务，进度条
㈨ 如何在spring mvc中上传图片并显示出来
可以使用组件上传JspSmartUpload.这是一个类.
<form name="f1" id="f1" action="/demo/servlet/UploadServlet" method="post" enctype="multipart/form-data">
<table border="0">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>相片:</td>
<td><input type="file" name="pic" id="pic"></td>
</tr>
<tr>
<td>相片:</td>
<td><input type="file" name="pic2" id="pic2"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"></td>
</tr>
</table>
</form>
这里直接通过表单提交给servlet访问,spring中的话需要配置(一般就不用servlet了,自行配置).
以上在JSp页面中,以下是servlet/action中的代码,由于采用了spring框架,怎么做你知道的(没有servlet但是有action).
package com.demo.servlet;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jspsmart.upload.File;
import com.jspsmart.upload.Files;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
public class UploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
SmartUpload su = new SmartUpload();
//初始化
su.initialize(this.getServletConfig(), request, response);
try {
//限制格式
//只允许哪几种格式
su.setAllowedFilesList("jpg,JPG,png,PNG,bmp,gif,GIF");
//不允许哪几种格式上传,不允许exe,bat及无扩展名的文件类型
//su.setDeniedFilesList("exe,bat,,");
//限制大小,每个上传的文件大小都不能大于100K
su.setMaxFileSize(100*1024);
//上传文件的总大小不能超过100K
//su.setTotalMaxFileSize(100*1024);
//上传
su.upload();
//唯一文件名
//得到文件集合
Files files = su.getFiles();
for(int i=0;i<files.getCount();i++)
{
//获得每一个上传文件
File file = files.getFile(i);
//判断客户是否选择了文件
if(file.isMissing())
{
continue;
}
//唯一名字
Random rand = new Random();
//String fileName = System.currentTimeMillis()+""+rand.nextInt(100000)+"."+file.getFileExt();
String fileName = UUID.randomUUID()+"."+file.getFileExt();
//以当前日期作为文件夹
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String dirPath = sdf.format(new Date());
//获得物理路径
String realDirPath= this.getServletContext().getRealPath(dirPath);
java.io.File dirFile = new java.io.File(realDirPath);
//判断是否存在
if(!dirFile.exists())
{
//创建文件夹
dirFile.mkdir();
}
//保存
file.saveAs("/"+dirPath+"/"+fileName);
//file.saveAs("/uploadFiles/"+fileName);
}
//原名保存
//su.save("/uploadFiles");
} catch (Exception e) {
System.out.println("格式错误");
}
//获得用户名
Request req = su.getRequest();
String username = req.getParameter("username");
System.out.println(username);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
特别注意导的包是JspSmartUpload中的还是java.io.*中的.
再次说明,这段代码是servlet中的,spring中的action可以剪切以上的一部分.请自行调整.
㈩ 如何在spring mvc中上传图片并显示出来
可以使用组件上传JspSmartUpload.这是一个类.
<form name="f1" id="f1" action="/demo/servlet/UploadServlet" method="post" enctype="multipart/form-data">
<table border="0">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>相片:</td>
<td><input type="file" name="pic" id="pic"></td>
</tr>
<tr>
<td>相片:</td>
<td><input type="file" name="pic2" id="pic2"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"></td>
</tr>
</table>
</form>
这里直接通过表单提交给servlet访问,spring中的话需要配置(一般就不用servlet了,自行配置).
以上在JSp页面中,以下是servlet/action中的代码,由于采用了spring框架,怎么做你知道的(没有servlet但是有action).
package com.demo.servlet;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jspsmart.upload.File;
import com.jspsmart.upload.Files;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
public class UploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
SmartUpload su = new SmartUpload();
//初始化
su.initialize(this.getServletConfig(), request, response);
try {
//限制格式
//只允许哪几种格式
su.setAllowedFilesList("jpg,JPG,png,PNG,bmp,gif,GIF");
//不允许哪几种格式上传,不允许exe,bat及无扩展名的文件类型
//su.setDeniedFilesList("exe,bat,,");
//限制大小,每个上传的文件大小都不能大于100K
su.setMaxFileSize(100*1024);
//上传文件的总大小不能超过100K
//su.setTotalMaxFileSize(100*1024);
//上传
su.upload();
//唯一文件名
//得到文件集合
Files files = su.getFiles();
for(int i=0;i<files.getCount();i++)
{
//获得每一个上传文件
File file = files.getFile(i);
//判断客户是否选择了文件
if(file.isMissing())
{
continue;
}
//唯一名字
Random rand = new Random();
//String fileName = System.currentTimeMillis()+""+rand.nextInt(100000)+"."+file.getFileExt();
String fileName = UUID.randomUUID()+"."+file.getFileExt();
//以当前日期作为文件夹
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String dirPath = sdf.format(new Date());
//获得物理路径
String realDirPath= this.getServletContext().getRealPath(dirPath);
java.io.File dirFile = new java.io.File(realDirPath);
//判断是否存在
if(!dirFile.exists())
{
//创建文件夹
dirFile.mkdir();
}
//保存
file.saveAs("/"+dirPath+"/"+fileName);
//file.saveAs("/uploadFiles/"+fileName);
}
//原名保存
//su.save("/uploadFiles");
} catch (Exception e) {
System.out.println("格式错误");
}
//获得用户名
Request req = su.getRequest();
String username = req.getParameter("username");
System.out.println(username);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
特别注意导的包是JspSmartUpload中的还是java.io.*中的.
再次说明,这段代码是servlet中的,spring中的action可以剪切以上的一部分.请自行调整.
希望能够帮助你.