uploadify上传图片

最新推荐文章于 2025-08-08 22:01:10 发布

iteye_8264

最新推荐文章于 2025-08-08 22:01:10 发布

阅读量70

点赞数

文章标签： java javascript ViewUI

本文介绍了一种利用Uploadify插件实现文件上传的方法。通过设置上传文件的类型限制为图片格式并限定文件大小不超过1MB，实现了文件的即时上传预览功能。该方法适用于网页应用中对用户上传图片进行快速预览的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现源码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>uploadify上传图片</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link type="text/css" rel="stylesheet" href="../../js/uploadify/uploadify.css"/>
	<script type="text/javascript" src="../../js/jquery-1.12.3.js"></script>
	<script type="text/javascript" src="../../js/uploadify/jquery.uploadify.js"></script>
	<script type="text/javascript">
		$(function(){
			 $("#upload").uploadify({
			    'height': 25,
                'width': 100, 
		        'auto': true,
		        'removeTimeout' : 10,
		        'buttonText': '上传图片',
		        'fileTypeExts': '*.gif; *.jpg; *.png',
		        'fileSizeLimit' : '1MB',
		        'swf': '../../js/uploadify/uploadify.swf',
		        'uploader': '../../js/uploadify/uploadify.php',
		        'cancelImg': '../../js/uploadify/uploadify-cancel.png',
		        'buttonImage' : '../../images/img.PNG',
		        'multi': false,
		        'onUploadSuccess':function(file){
		             console.log(file.name);
                     $("#imgs").css("display","block");
                     $("#imgs").attr("src",file.name);
                }
		    });
		});
	</script>

  </head>
  
  <body>
     <input type="file" name="upload" id="upload" />
     <img id="imgs" style="width:100px; height: 100px; display: none;">
  </body>
</html>

2、实现结果