springmvc图片上传(兼容ie8以上,实时预览)

html代码:

<form id="uploadform" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td><span class="need">&nbsp;&nbsp;&nbsp;</span>新闻图片:</td>
                    <td width="100" align="right"><input type="file"
                        onchange="preview(this)" name="newsImages" id="newsImages" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="preview"></div>
                    </td>
                </tr>
            </table>
        </form>

js:

<script type="text/javascript" src="resource/js/jquery-1.9.1.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
function preview(file) {
            var prevDiv = document.getElementById(‘preview‘);
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function(evt) {
                    prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;
                }
                reader.readAsDataURL(file.files[0]);
            } else {
                prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
            }
            uploadPhoto();
        }
        function uploadPhoto() {
            var imagePath = $("#newsImages").val();
            if (imagePath == "") {
                alert("please upload image file");
                return false;
            }
            var strExtension = imagePath.substr(imagePath.lastIndexOf(‘.‘) + 1);
            if (strExtension != ‘jpg‘ && strExtension != ‘gif‘
                    && strExtension != ‘png‘ && strExtension != ‘bmp‘) {
                alert("please upload file that is a image");
                return false;
            }
            $("#uploadform").ajaxSubmit({
                type : ‘POST‘,
                url : ‘news/upload‘,
                data : {
                    imgPath : $("#newsImages").val()
                },
                success : function(data) {
                    $("input[name=‘newsImage‘]").val(data);
                },
                error : function() {
                    alert("上传失败,请检查网络后重试");
                }
            });

        }

controller:

@Controller
@RequestMapping(value = "/news")
public class NewsController {

/**
     * 处理上传的file文件的图片
     * @author zhangyn
     * @param map
     * @param request
     * @param newsImages
     * @return
     */
    @RequestMapping(value = "/upload")
    @ResponseBody
    public String upload(ModelMap map, HttpServletRequest request,
            @RequestParam(value = "newsImages", required = false) MultipartFile newsImages) {
        String pic_path = request.getSession().getServletContext().getRealPath("/")+"upload";//保存在项目下的upload文件夹下。
        String fileName = newsImages.getOriginalFilename();
        Date date=new Date();
        long time = date.getTime();
        File targetFile = new File(pic_path, time+fileName);//重命名的考虑是按照一定的格式存储利于查找,且避免了相同名称的覆盖。
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        try {
            newsImages.transferTo(targetFile);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "upload/"+time+fileName;
    }
}

spring-mvc.xml

    <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760" />
    </bean>

时间: 2024-10-04 14:33:24

springmvc图片上传(兼容ie8以上,实时预览)的相关文章

jQuery图片上传前先在本地预览

/**名称:图片上传本地预览插件 v1.1*作者:周祥*时间:2013年11月26日*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;*使用方法: <div><img id="I

jQuery图片上传前先在本地预览(不经过后端处理)

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

springmvc图片上传

//-------------------------------------上传图片--------------------------------------------------- @RequestMapping(value="upload2.action" ) public String upload2(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException,

ueditor1.4.3 springmvc图片上传

ueditor:百度富文本编辑器,地址:ueditor.baidu.com 版本选择,之所以选择1.4.3,是因为ueditor 1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ueditor做富文本编辑?这个看项目组大神了,小喽啰没法做技术引入,如果有选择,不太建议用ueditor商用,bug比较多,当然使用简单也是个有

springmvc图片上传、json

springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> 2.添加springmvc-servlet.xml里面的配置 <bean id=&q

springMVC图片上传的处理方式

首先需要依赖的jar包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <art

jsp+ajax+springMvc图片上传立刻回显 电商

思路:onchange()事件触发异步请求,js将成功后返回图片的地址动态写入 JSP页面:  外层一个ID为myForm的表单 <pre name="code" class="html"> <a name="uploadImgs" id="uploadImgs"></a> <p><label><samp>*</samp>上传产品图片(XX尺寸

Java带图片预览功能的图片上传兼容火狐ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

mvc文件上传支持批量上传,拖拽以及预览,文件内容校验等

使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_zh.js}或者修改Fileinput中的本地化词汇 3.文件大小限制:修改fileinput.js中的3195行 maxFilePreviewSize配置节点 示例:前台 @{ Layout = null; } <!DOCTYPE html> <html> <head> &