1. 程式人生 > >uploadify上傳圖片

uploadify上傳圖片

rds desc title let jsb lin art cache gif

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、實現結果

技術分享

uploadify上傳圖片