jquery mobile开发手机webapp页面（二）上传功能

最新推荐文章于 2021-03-13 10:04:45 发布

轻松的山岭

最新推荐文章于 2021-03-13 10:04:45 发布

阅读量5k

点赞数 1

分类专栏： web前端 php 文章标签：插件手机图片 jquery

本文链接：https://blog.csdn.net/z21102/article/details/50829126

版权

这篇文章接着上一篇文章来说。由于公司是做摄影这块的，所以很多开发都涉及到图片的上传。我选择的是与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