最近在做网站,缩略图和个人图片(类似大头贴),不知道如何在后台怎样编辑,大家有做过类似的说说思路吧😇😇
我用springmvc实现的文件的上传
在控制层写了一个方法来处理,方法如下:
@RequestMapping(value = "/product_save")
public String saveProduct(HttpServletRequest servletRequest, @ModelAttribute Product product, BindingResult bindingResult,Model model){
List<MultipartFile>files=product.getImages();
List<String>fileNames=new ArrayList<String>();
if(null!=files&&files.size()>0){
for(MultipartFile multipartFile:files){
//获得文件的名字
String fileName=multipartFile.getOriginalFilename();
fileNames.add(fileName);
//创造保存文件的文件夹
File imageFile=new File(servletRequest.getServletContext().getRealPath("/image"),fileName);
try{
//保存操作
multipartFile.transferTo(imageFile);
}catch (IOException e){
e.printStackTrace();
}
}
}
model.addAttribute("product",product);
return "ProductDetails";
}
ProductDetails为视图名字,在配置文件里为其配置了相应的前缀和后缀,所以这里就省略了
对应的前端页面:
<form action="product_save" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Add a Product</legend>
<p>
<label for="name">Product Name:</label>
<input id="name" type="text" name="name"/>
</p>
<p>
<label for="description">Description:</label>
<input id="description" type="text" name="description"/>
</p>
<p>
<label for="price">Price:</label>
<input id="price" type="text" name="price"/>
</p>
<p>
<label for="image">Product Image:</label>
<input type="file" name="image" id="image"/>
</p>
<p>
<input id="reset" type="reset" tabindex="4">
<input id="submit" type="submit" tabindex="5" value="Add Product">
</p>
</fieldset>
</form>
总结一下,上传文件大概就是四步骤
1)获得文件
2)获得文件名
3)新建一个保存文件的文件夹
4)保存调用transfer方法即可
@RequestMapping(value = "/product_save")
public String saveProduct(HttpServletRequest servletRequest, @ModelAttribute Product product, BindingResult bindingResult,Model model){
List<MultipartFile>files=product.getImages();
List<String>fileNames=new ArrayList<String>();
if(null!=files&&files.size()>0){
for(MultipartFile multipartFile:files){
String fileName=multipartFile.getOriginalFilename();
fileNames.add(fileName);
File imageFile=new File(servletRequest.getServletContext().getRealPath("/image"),fileName);
try{
multipartFile.transferTo(imageFile);
}catch (IOException e){
e.printStackTrace();
}
}
}
model.addAttribute("product",product);
return "ProductDetails";
}
自定义表单控件 我用php做过 $_FILES 接守 move_uploaded_file()保存文件 然后自己拼接img
这个需不需要引用插件啊??
@记住了: 不用,用表单控件,图片信息传递给台,就没你什么事儿,
图片大小前端尺寸可以控制吧。<img src="/i/mouse.jpg" height="200" width="200"
/>
大头贴的话用 CSS 控制 。
<style>
img{border-radius:10px}
</style>
这个我知道了
可以用一个控件bootstrap-fileinput上传
完整代码不贴了,
前端
引用 ajaxfileupload 这个js,然后按照百度教程配置一下
后端
比如说 路径为
home控制下 下面创建一个叫 Upload 的方法
public string Upload(){
var file= requset.postfiles[0];
}
ps:楼上的方法 太死板了,不灵活