jquery.uploadify图片文件上传与显示

图片上传与显示

本例子以jquery.uploadify+java+springMVC开发

1、上传HTML页面

2、在函数中设置上传参数

3、将文件存储到数据库（此处使用springMvc） 

4、将数据库中上传图片文件显示到jsp页面

---

1、上传HTML页面

<div id="queue"></div>
<input id="image_upload"name="image_upload" type="file"multiple="true">

2、在函数中设置上传参数

function showUploadImageDialog(){
	var setting = {
		'swf'      : curpath + '/resources/frame/uploadify/uploadify.swf',
		'uploader' : curpath + '/file/upload/uploadfile',
		'auto'     : true,
        'fileObjName'   : 'file', 
		'buttonText' : '选择上传图片',
		'fileTypeExts' : '*.jpg;*.jpeg;*.gif;*.png',
		'fileTypeDesc' : '*.jpg;*.jpeg;*.gif;*.png',
		'fileSizeLimit': '300KB',
		'multi' : false,
		'successTimeout' : 300,
		'onUploadSuccess' : function(f,d,r){
			viewImage(d);
			$('#imageId').val(d);
		},
		 'onSelect' : function(file) {
			 $('#description').val(file.name);
		 }
	};
	$('#image_upload').uploadify(setting);
    //设置上传参数
    //$("#image_upload").uploadify('settings','formData'{'id':id,'description':description,'type':type}); 
}

3、将文件存储到数据库（此处使用springMvc） 

public String saveFile(ModelMap model,MultipartHttpServletRequest request, HttpServletResponse response,
String param,String sysname){
try {
    MultipartFile ufile = request.getFile("file");
    String fileName = ufile.getOriginalFilename();
    String fileType=originalFileName.substring(fileName .lastIndexOf("    .")+1);
    String name =originalFileName.substring(0,fileName .lastIndexOf("."));

    DataSource ds = (DataSource)this.ac.getBean("dataSource");
    Connection conn = ds.getConnection();
    conn.setAutoCommit(false);
    PreparedStatement pst  =conn.prepareStatement("insert into image(id,content,name)values(?,?,?)");
    //Map<String, String[]> params = request.getParameterMap();

    pst.setString(1, id);

    pst.setBytes(2, ufile.getBytes());

    pst.setString(3,name);

    pst.executeUpdate();

    conn.commit();

    pst.close();
}

4、将数据库中上传图片文件显示到jsp页面

var path=curpath + '后台地址/id='+id+'&method=showImage';
$('#image').attr('src',path);

	public void showImage(HttpServletRequest request,HttpServletResponse response){    
	      response.setCharacterEncoding("utf-8");
	     /*response.setContentType("multipart/form-data");*/

	 File file =getImageFile(id)
	       try {
	           InputStream inputStream = newFileInputStream(file);
	           OutputStream os = response.getOutputStream();
	           
	           byte[] b = new byte[2048];
	           int length;
	           while ((length = inputStream.read(b))> 0) {
	               os.write(b, 0, length);
	           }
	 
	           os.close();
	 
	           inputStream.close();
	       } catch (FileNotFoundException e) {
	           e.printStackTrace();
	       } catch (IOException e) {
	           e.printStackTrace();
	       }

	private File getImageFile(String id) {

		conn = ds.getConnection();

		conn.setAutoCommit(false);

		stmt = conn.prepareStatement("selectname,content from image WHERE id = ?");

		stmt.setString(1, id);

		rs = stmt.executeQuery();

		rs.next();

		String tempDir = Common.getWebRootPath() + "/temp/image";

		String fileDir = tempDir + "/" + id;

		FileUtils.forceMkdir(new File(fileDir));

		String fileName = rs.getString("NAME");

		String filePath = fileDir + "/" + fileName;

		File file = new File(filePath);

		in = rs.getBlob("CONTENT").getBinaryStream();

		out = new FileOutputStream(file);

		IOUtils.copy(in, out);

		return file;

	}