HTML5学堂：关于文件上传，主要包括“构建基本表单”-“使用AJAX发送请求，上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言，返回基本图片路径”-“使用DOM操作设置预览图路径”。一起来开始今天的学习吧~！

刘国利-独行冰海：原本这节课计划是给5班孩子讲的，但是，今日课讲得实在有些不愉快，只是感觉心好累，具体原因就不提了，直接上文章吧~

先来看效果图

上图为上传文件前上图为上传文件后

1、构建基本的表单，并针对表单进行相关处理

、在“上传文件”数据发生变化的时候，使用AJAX发送请求

、PHP获得到文件的基本信息

4、PHP执行SQL，将获取的基本信息存入数据库

5、PHP返回基本的图片路径

6、使用DOM操作设置预览图的路径

最核心的知识，其实依旧是知识的逻辑。

最基本的数据库和最基本的文件夹结构还是要有的。

此处基本的文件夹结构如下图：

数据库相关准备如下图：

formaction=edit.phpclass=formclass=add-form

divclass=control

labelfor=username用户名：/label

inputtype=textname=usernameid=usernamevalue=HTML5学堂

/div

divclass=control

label头像：/label

div

imgsrc=alt=需要上传的图片id=face-img

/div

!--与upload-form表单的input相关联--

labelfor=faceclass=face上传图片/label

/div

divclass=form-actions

inputtype=submit

/div

/form

!--文件上传的表单--

formaction=file.phpmethod=postclass=upload-formenctype=multipart/form-data

div

inputtype=filename=fileid=face

/div

/form

如果需要实现文件的上传，需要为表单form标签增加一个属性：enctype。表单中enctype=multipart/form-data的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-







































北京治疗白癜风的价格是多少钱
百癜风

转载请注明原文网址：http://www.coolofsoul.com/phpys/12588.html