|
这是利用ajaxupload组件实现上传图片的功能，我稍微增强了一些效果，直接上截图：
这是起始页面
选择图片
正在上传的状态
上传后
再上传一次
由于我做了上传的限制，所以只能上传两张照片
点击删除按钮，试一下
删除后的状态，将选中的照片删除，并且解除上传限制
这就是大致的效果了，还不错吧，哈哈
接下来简要介绍下我的设计：
1、利用ajaxupload组件上传；
2、后台将组件上传的临时文件转存到自己喜欢的目录（我是存放到tomcat/webapps对应的项目下的）
3、根据组件返回前台的参数显示图片，并且将路径保存；
代码就不贴出来了，大家有兴趣的话，可以到这里下载完整的工程http://download.csdn.net/detail/abauch_d/5339395
以下是网上的一些关于该组件api的资料：
new AjaxUpload(‘#upload_button_id’,{
// 服务器端上传脚本
// 注意: 文件不允许上传到另外一个域上
action: ‘upload.php’,
// 文件上传的名字
name: ‘userfile’,102)">// 发送的附加数据
data: {
example_key1 : ‘example_value’,
example_key2 : ‘example_value2′
},102)">// 筛选后提交文件
autoSubmit: true,102)">// 您希望从服务器返回的数据类型
// HTML (text) 和 XML 自动检测
// 当您使用JSON作为响应时很实用，在这种情况下就设置为 “json”
// 也要设置服务器端的响应类型为text/html,否则在IE6下是不工作的
responseType: false,102)">// 文件选择后使用
// 当autoSubmit为disabled时很管用
// 您可以通过返回false取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onChange: function(file,extension){},102)">// 文件上传时调用
// 您可以通过设置返回false 取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onSubmit: function(file,extension) {},102)">// 当文件上传完成的时候调用
// 警告！不要使用”false”字符串作为服务器的响应
// @参数file 指上传的文件名
// @参数 response 指服务器的响应
onComplete: function(file,response) {}
});
ps：我发现一个问题，当我要在页面用两个上传按钮的时候，这个代码就必须要两份，想共用一份代码，就弄不来，会出乱七八糟的问题，如果有实现的了的，欢迎来搞！ （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
