这篇文章接着上一篇文章来说。由于公司是做摄影这块的,所以很多开发都涉及到图片的上传。我选择的是与jquery有很好兼容的uploadifive上传插件。
应用插件的时候需要引用这些文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
jquery是必须的,因为uploadifive依靠jquery,没有他就无法运行。下面的样式表可以为上传按钮添加上css3的效果。然后需要添加一个input标签来用来做上传的表单按钮
<input id="file_upload" type="file" name="file_upload" />
当然还有我们的js代码。这是官方给出的例子:
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : 'uploadifive.php'
// Put your options here
});
});
接下来给出的是官方完整的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive-v1.0.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
</head>
<body>
<h1>UploadiFive Demo</h1>
<form>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'uploadScript' : 'uploadifive.php'
});
});
</script>
</body>
</html>
如果你用的后台是php,可以将
<?php $timestamp = time();?>
放到后台文件中,$timestap是一个时间戳用来记录上传时间。uploadscript引用的文件是uploadifive.php这个是uploadifive的核心。插件支持多图上传和拖拽上传,并且有进度条可以显示上传进度。我用到的是最基本的内容。有兴趣的同学可以登录他的官网进行查阅。地址是http://www.uploadify.com/docume