做无刷新上传前端体会

来源:互联网 发布:域名购买哪个网站好 编辑:程序博客网 时间:2024/06/16 01:27

首先是基础的页面部分,这次为了节省空间,背景的渐变效果没有用背景图片,而是直接用了一个css3的新特性,有一个线性渐变的效果,具体内容可以参考网上的这篇教程css3线性渐变;这里就不多说了,然后就是各种页面出现的题,另我最深刻的当然就是js代码上传和下载部分的实现了。
*为了实现无刷新的上传,我使用了jquery的这款uploadify插件。如果没有必要实现无刷新上传的话,可以直接使用form表单的直接post发送文件就可以,具体教程可以看这个视频慕课网的上传与下载。

uploadify这款插件使用

在使用这款插件的时候,我开始就直接下载下来,看着demo进行使用,但是遇到一些问题,我就去百度查,但是发现按照别人的方法来,还是解决不了我的问题,最后发现是别人使用的文档不是一个版本号。我的是最新的版本,别人的是老版本。导致出现同样的错误,别人那样就可以解决,而我的就解决不了。
所以总结出一点,对应的插件版本看对应的官方文档。而且百度上查到的答案只能是作为一种参考,思考一下可能是哪里出现问题。看别人的分析过程。
仔细看他的文档,进入他的官网看uploadify官网;里面特别要说一个单词。对于英语比较差的朋友来说就是

forums这个单词他的意思是论坛
里面有好多用这个插件遇到的问题的解决方案,但是遗憾的是都是英文,所以必须要提高英语的阅读能力,解决问题起来可能会很快速。

用的时候关键是这几个点
*示例的时候该导入的文件必须导入,版本号也不要错误
*’swf’ : ‘uploadify.swf’,
*’uploader’ : ‘你自己的后端请求url’,
为了实现和后端交互,他要获取到你文件的名字,所以你要指定你的'fileObjName' : 'filename',这个参数必须要指定,这样后端才能通过filename这个名字来获取到你的文件内容,这个必须要和后端商量好。要不然不会成功的。
*因为是post请求发送,不能直接通过URL拼接请求参数,所以我们要通过这个插件的'formData':{json格式数据},
这里面的数据是你和后端定的参数。这样后端才能知道你是想要获取到什么数据。
*这个插件是基于flash的所以他可以兼容很多类型浏览器,这个插件官网还有一个是html5版本的由于要收费,所以没有使用,这个是flash的,所以他好多的内容都给你写好了,
所以就会有一些意想不到的问题出现,比如他必须以http://请求发出的请求他才能使用。要不人连那个文件选择都打不开。
*我个人感觉虽然flash已经日暮西山了,但是在特定场合还是有可能使用的,所以有必要了解一下。只是了解,不要偏离中心。
*接下来就是上传成功之后的回调函数了,上传成功后会用到这个函数'onUploadSuccess' : function(file, data, response){}
这个函数file就是你上传文件的对象。他可以获取到文件的属性比如大小、文件名等。
data就是后端给前端返回的数据。response可以看文档。
这时有个细节问题就是后端返回的数据可能虽然是json格式的但是你如果直接用data.的话可能就会报错,所以就要用JSON.parse(data)用这个方法进行转化一下,这样你就可以用JSON那种获取方式,获取里面的值。

这里看什么时候是要解析一下,什么时候拿来用,有一个办法就是发送请求的时候看这个就是看是什么类型的数据方法
通过响应头的类型值可以看到是什么类型的值,如果是json就直接拿来用,如果不是就要解析一下。
这块我发现有个工具fiddler这个工具可以模拟一些头信息进行发送一些信息。
*fiddler的简单使用看这篇教程
*跨域的情况参考这篇解决办法
*get和post发送请求的区别参考这篇文档
post:把提交的数据放在HTTP的包体中数据放置(在HTML Header内提交,也可以URL参数)。因此,GET提交的数据会在地址栏中显示出来,而POST提交,地址栏不会改变

get(GET提交,请求的数据会附在URL之后查询)
就是把数据放置在HTTP协议头中,以?分割URL和传输数据,多个 参数用&连接
304 (NOT MODIFIED)浏览器的缓存机制

*bom的操作跳转和刷新>location

bom的简单回顾

*文档元素。html就是html。xml任何元素就有可能成为。
*node类型,结点层次,节点关系someNode.childNods[0];
someNode.childNodes.item(1);
参考这篇文档

0 0
原创粉丝点击