这阵子做了一个项目,涉及到了图片上传,以往用的都是uploadify这个插件,感觉它在PC上的使用还是很强大的,
不过最近这个项目涉及到了移动端的上传,其实uploadify也可以,但是他有一个 uploadify.swf,这个东东在移动端可是不被待见的,需要调整才可以.
我是懒得去调整uploadify,而且也不能保证调整之后会比原装的更好,因此,采用了另一个插件: jquery.fileupload,
本来也是想去网上搜罗一下这个插件的具体用法,然后我就可以坐享其成了,
可现实结果告诉我你不要做梦了,赶紧自己研究吧.
对于一个需要解决实际问题的码农来说,他最想要的是什么?当然是可完成的逻辑了.
可网上都在讲这个插件的基本理论,试问,那边有官网我用你讲什么理论呢?对不对.
先来看一下官网截图吧:
我是喜欢它结合bootstrap的美观性,所以用了它.
言归正传,首先做上传图片这个功能之前一定要明确这样几个步骤:
1.前端上传页面和控件.
2.后端可以接收处理的逻辑代码文件(一般文件只能以POST进行接收,虽然是废话,但还是要强调.真的有遇到过用GET提交的.).
3.你还想干嘛?那就谁也不知道了.
先来创建一个HTML页面,取名为 addimage.html
需要引入的资源文件如下(存放位置不是唯一的,这是我的项目资源文件的存放结构)
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" /> <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/upload/jquery.fileupload.css" /> <script type="text/javascript" src="/js/upload/jquery.ui.widget.js"></script> <script type="text/javascript" src="/js/upload/jquery.iframe-transport.js"></script> <script type="text/javascript" src="/js/upload/jquery.fileupload.js"></script>