用jQuery Mobile + PHP实现手机文件上传的实例教程

很简单的一个小例子 jQuery Mobile + PHP 通过超全局 $_FILES 上传,然后用move_uploaded_file()方法把上传的图片移动到到本地服务器下的文件夹,

下面是html代码

 代码如下 复制代码
<!DOCTYPE html>
<html>
<head>
        <meta charset = "utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="upload" >
       <div data-role="header"  >
                        <h1>校园祭</h1>
                        <a href="#pageone" data-rolr = button data-icon="home" class="ui-btn-left" >首页</a>
        </div>
        <div data-role="content" >
        <form action="upload_file.php" method="post" enctype="multipart/form-data" data-ajax="false">
                        <input  id="uploadimg" name="file"  type="file"  runat="server" method="post"
                                       enctype="multipart/form-data" data-inline="true"  data-ajax="false" />
                        <center><button  data-inline="true"  >上传</button></center>
        </form>
        </div>
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
                        <h1>创新实验</h1>
        </div>
</div>
</body>
</html>

php的代码

 代码如下 复制代码
<?php
if ($_FILES["file"]["error"] > 0)
{
        echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
       echo "Upload: " . $_FILES["file"]["name"] . "<br />";
        echo "Type: " . $_FILES["file"]["type"] . "<br />";
       echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
        if (file_exists("upload/" . $_FILES["file"]["name"]))
        {
                echo $_FILES["file"]["name"] . " already exists. ";
        }
        else
        {
                move_uploaded_file($_FILES["file"]["tmp_name"],
               "upload/".$_FILES["file"]["name"]);
                echo "Stored in: "  ."upload/". $_FILES["file"]["name"];
        }
}
}
?>

代码很简单,但是使用过程中却发现一个问题,自己试了好久都上传不了。询问了小伙伴后,发现问题所在是文件权限不足,从而限制了网页上传图片到文件夹中.所以解决办法就是把文件夹的权限问题解决掉.

 代码如下 复制代码
$ cd /var/www
$ sudo chmod -R  777  html

ok,现在就可以将文件上传到服务器的文件夹了.

时间: 2024-08-07 01:50:20

用jQuery Mobile + PHP实现手机文件上传的实例教程的相关文章

解析Jquery的LigerUI如何实现文件上传

本篇文章是对Jquery中的LigerUI实现文件上传的方法,进行了分析介绍,需要的朋友可以参考下   一.在Head中加入    <script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>     <script src="../lib/js/ligerui.expand.js" type="text/javascr

php jquery 多文件上传简单实例

 这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下   代码如下: <div id="mulitplefileuploader">Upload</div>     <div id="status"></div>   <script>     $(document).ready(function()   {     var settings = {       url: &

jquery文件下载插件以及hadoop文件上传的小问题

问题描述 jquery文件下载插件以及hadoop文件上传的小问题 求一个文件下载插件介绍,和上传插件类似,可以显示进度,暂停等,求大神,求告知!万分感谢: 附:学校实训项目做了一个云存储相关的,文件利用上传插件上传到tomcat项目目录里,再上传到hadoop hdfs,然后删除,中间转了一道,求好的解决办法. 解决方案 http://download.csdn.net/detail/li575563191/7342725 解决方案二: http://blog.karachicorner.co

jQuery插件AjaxFileUpload实现ajax文件上传_jquery

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

jQuery.uploadify文件上传组件实例讲解_jquery

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

Jquery和BigFileUpload实现大文件上传及进度条显示_jquery

实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交.ajaxform提交后如果执行提交后的事件,比如在数据库里插入记录,还在调试中. 1.用到了jquery 的 progressbar .form.MultF

JavaWeb文件上传下载实例讲解(酷炫的文件上传技术)_java

一.课程概述 在Web应用系统开发中,文件上传功能是非常常用的功能,今天来主要讲讲JavaWeb中的文件上传功能的相关技术实现,并且随着互联网技术的飞速发展,用户对网站的体验要求越来越高,在文件上传功能的技术上也出现许多创新点,例如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,大文件断点续传,大文件秒传等等. 本课程需要的基础知识: 了解基本的Http协议内容 基本IO流操作技术 Servlet基础知识 javascript/jQuery技术基础知识 二.文件上传的基础 对于文件

PHP实现文件上传下载实例_php实例

本文介绍了PHP实现文件上传与下载,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧. 一.上传原理与配置 1.1 原理 将客户端文件上传到服务器端,再将服务器端的文件(临时文件)移动到指定目录即可. 1.2 客户端配置 所需:表单页面(选择上传文件): 具体而言:发送方式为POST,添加enctype="multipart/form-data"属性,两者缺一不可(但是,优缺点并存,这里也限定了上传的方式和上传的文件之后的调用等方面,后面会说到) <!DOCTYPE h

Ajax提交Form表单及文件上传的实例代码_AJAX相关

前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f