jquery uploadify简单图片上传

最新推荐文章于 2021-03-21 10:42:55 发布

aa1049372051

最新推荐文章于 2021-03-21 10:42:55 发布

阅读量5.2k

点赞数

分类专栏： javascript 文章标签： jquery uploadify

本文链接：https://blog.csdn.net/aa1049372051/article/details/24712883

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.先下载uploadify包(官网地址:http://www.uploadify.com/).

本文章中用到的是uploadify 3.2(csdn下载地址:http://download.csdn.net/download/aa1049372051/7270371)

2.将下载的Uploadify包解压到apache目录下的uploadify下

3.更改代码

uploadify/index.php的前台显示代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>uploadify文件上传</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
	font: 13px Arial, Helvetica, Sans-serif;
}
.icon-close-green {
    background: url('uploadify-cancel.png') 0 0 no-repeat;
    cursor: pointer;
    height: 19px;
    position: absolute;
    width: 19px;
}
</style>
</head>

<body>
	<h1>uploadify文件上传事例</h1>
	<form>
		<div id="queue"></div>
		<input id="file_upload" name="file_upload" type="file" multiple="true">
                <p style="display:none">
                <!--//'auto':false,  //是否自动上传 false时用到-->
                <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>| 
                <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a>
                </p>
	</form>
        <!--文件上传成功显示区域开始-->
        <div id="filedisplay">
        </div>
        <!--文件上传成功显示区域结束-->
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
        $('#file_upload').uploadify({
                //附带参数(基本用于验证)
                'formData'     : {
                        'timestamp' : '<?php echo $timestamp;?>',
                        'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',  //flash
                'uploader' : 'uploadify.php',  //上传处理程序
                //'buttonImage':'upbutton.gif',  //浏览按钮背景图片
                'buttonText': '上传文件',      //按钮显示的文字
                //显示的高度和宽度，默认 height 30；width 120
                //'height': 15,
                //'width': 80,
                //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc': 'Image Files',
                //允许上传的文件后缀
                'fileTypeExts': '*.gif; *.jpg; *.png',
                //'auto':false,  //是否自动上传
                //设置为true将允许多文件上传
                'multi': true,
                //上传到服务器，服务器返回相应信息到data里
                'onUploadSuccess':function(file, data, response){
                    var img="<span class='showimages' style='margin-right:20px'><img src='"+data+"' style='width:80px;height:80px;'/>";
                    img=img+'<span class="icon-close-green" key='+data+' οnclick="delimage(this)"></span>';
                    img=img+'</span>';
                    $('#filedisplay').append(img);
                }
        });
});

//删除图片
function delimage(obj)
{
    var file=$('#filedisplay').find('[src="'+$(obj).attr('key')+'"]');
    //隐藏图片
    file.hide();
    $(obj).hide();
    //如果有需要还可以在后台删除图片
    $.getJSON("delimage.php",{'file':$(obj).attr('key')},function(result){
  });
}
</script>
</body>
</html>

uploadify/uploadify.php的后台保存文件代码

<?php
$targetFolder = '/uploads'; // Relative to the root
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = dirname(__FILE__) . $targetFolder;
	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
	if(!is_dir($targetPath))
        {
            //如果目录不存在就创建
            mkdir($targetPath); 
            chmod($targetPath,0777); 
        }
	// Validate the file type
	$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	
	if (in_array($fileParts['extension'],$fileTypes)) {
		move_uploaded_file($tempFile,$targetFile);
		echo './uploads/'.$_FILES['Filedata']['name'];
	} else {
		echo 'Invalid file type.';
	}
}
?>

uploadify/delimage.php的后台删除文件代码

<?php
if(!empty($_GET['file']))
{
    $file=$_GET['file'];
    if (unlink($file))
    {
        echo json_encode(array('msg'=>'ok'));
    }
    else
    {
        echo json_encode(array('msg'=>'fail'));
    }
}
?>