评论：jQuery文件上传  [查看原文]

@葬梦,你好感谢你的分享,但是我发现了两个bug,第一个是:当我限制数量为1,第二次上传的时候页面提示只能上传1个但是进度还是重新加载了,而且也重新上传到服务器了还是执行请求了?第二个是:第二次上传的时候没有判断文件上传的类型?

葬梦0
2017/6/30 10:10:48

谢谢，我会做个，修改，谢谢你的建议，家里出了点事情，比较忙，现在才看见，抱歉

编辑页面引入该js 后，发现没有能初始化就显示图片的方法啊。 通过后台传来的图片路径，显示相应的图片到框框中，这个没有，

葬梦0
2017/5/14 19:23:25

初始化显示图片？显示什么图片？上次的图片？初始化没有图片啊

后台传来的图片路径，可以用设置onUpload来获取，至于要显示在框里，这个确实没有，需求不同

反馈一个BUG：

我上传多个文件的时候回出现 有部分文件显示 失败，但是实际是已经上传成功了的。

出现原因是因为：总进度条读完了 下面的文件如果还在读条的话 会立马就变成错误

葬梦3
2017/5/13 19:08:01

是有这种情况，因为，有两个接口，一个接口是：uploadUrl，另一个是：progressUrl

这两个接口，第一个负责文件上传，第二个负责读取文件上传的进去，这里有一个bug，可以说是bug，就是如果你不写progressUrl，那么这个插件默认用模拟的数据进行累加上传的数据，什么意思呢，就是每秒增5000kb，但是你实际上早就上传成功了，总进度条没什么问题，但是文件进度条，就会根据模拟的这个数据进行判别是否上传成功，如果突然中止了（总进度条上传成功），但是模拟上传的数据还没有达到文件上传的数据总量，那么，之后所有的文件都会显示失败。

解决办法：设置一个progressUrl，后台写一个读取文件上传进度的接口

我看不到演示效果  一片空白...  谷歌浏览器

葬梦0
2017/5/13 19:00:06
可以的啊，我也不知道为什么

楼主，用C#怎么上传图片啊

葬梦0
2017/5/10 22:05:22

不知道，前台都是统一的，后台实现的方式不同

天蝎希希0
2017/5/10 22:48:24

就是不知道怎么写后台

葬梦0
2017/5/11 9:06:38

C#后台我也不会，不能帮你了，抱歉

你好，请问这个 progressUrl 怎么填，是哪个路径呢，能举个例子吗

葬梦1
2017/5/4 19:25:16

你看下我底下留下的链接，

https://pan.baidu.com/s/1hrLgel2

，是我用Spring MVC做的一个例子，里面还有用servlet做的例子，里面又涉及到进度条的上传，如果你是学java的，应该可以看懂，写的很浅显，如果你是写其它的，我帮不了你多少，我只能和你讲讲我的思路。


文件上传，在后台有两个操作，一个操作是将文件进行保存，另一个操作是记录文件上传了多少数据，和总数据量多少，这是一个监听的操作，需要写一个接口来获取这个进度，比如说：

/**
     * 这里是获取上传文件状态信息的访问接口
     * @param session
     * @return
     */
    @ResponseBody
    @RequestMapping("getStatus.do")
    public UploadStatus getStatus(HttpSession session){
        System.out.println((UploadStatus)session.getAttribute("upload_status"));
        return (UploadStatus)session.getAttribute("upload_status");
    }

这个接口就是你要写的这个progressUrl 地址

感谢作者，求助得到了细心帮助  顺利的解决了问题 ??

楼主你好，文件上传成功之后input里面的文件不是应该自动删除吗，这个要怎么实现呢?

葬梦0
2017/5/3 13:42:52

已经实现了，会自动帮您清除，不会影响你第二次上传

楼主 您看一下，formData进行append的时候 ，而且我追加的数据都是存在的呀！ 为啥追加不进去呢？  还有那个webkitRelativePath:""  代表什么意思呢？？文件的相对路径吗？  这个是必须有的吗？？

把你的源码下载下来,      "beforeUpload":beforeUploadFun,//在上传前执行的函数

        "onUpload":onUploadFun,//在上传后执行的函数这俩行注释去掉,函数并没有执行

葬梦3
2017/5/3 14:15:19

你好，我自己下载下来玩了一下

在这里我解释一下：

1、"beforeUpload":beforeUploadFun

function beforeUploadFun(opt){
        opt.otherData =[{"name":"你要上传的参数","value":"你要上传的值"}];
    }

在文件上传的时候，可能需要传一些其他的参数，这个执行你是看不见的，你可以在这个方法里面加一个alert来查看

2、"onUpload":onUploadFun

function onUploadFun(opt,data){
        alert(data);
        uploadTools.uploadError(opt);//显示上传错误
    }

这个代码你没办法，你也不好看见，但是还是可以用alert调用出来，我试了下，在 "onUpload":onUploadFun后面的‘，’（逗号）我写错了，你也可以试试用alert调用，这个方法的opt是初始化参数对象，不要去掉，这里的data是你后台传送给前台的数据，也不要去掉，方便你调用

注意上面两个方法参数都不要去掉

omg_lwf0
2017/5/5 10:32:36

也就是说beforeUpload这个方法会自动在上传服务器的时候，服务器可以接收到这个参数。onUpload就是成功后会执行吗？

不错，目前为止看到给出参考描述最详细的，并且楼主几乎回复了每一个发问者信息

葬梦0
2017/5/3 13:42:04

对自己写的东西负责而已，应该的

你好，请问这个可以搭配php使用吗

葬梦0
2017/4/30 23:13:41

可以，和语言无关，只是用js，css,html

kiwi!0
2018/7/12 22:03:46
您好，您的PHP方案解决了吗，可以加QQ:指导一下吗

kiwi!0
2018/7/12 22:04:53
我的 QQ 549686034

是后台返回值的问题吗

   "onUpload":function()这个上传成功的函数无法执行。错误在哪里？

葬梦0
2017/4/29 22:19:30

这几天比较忙，回复晚了，抱歉！

你好，是这样的，这个函数有一个参数data，这个data是后台传送前台的一个数据，比如说，我上传了5张图片，后台把这五张图片的信息传给前台显示等，所以不管你永不用到data，都需要加上data参数，这一点可能不太好，但是我没有想到什么更好的方案，如果还有什么不清楚或者有什么好的建议，可以留言，也可以找我QQ：1120850353

omg_lwf0
2017/5/5 10:33:49

你的意思在initUpload上传的时候也要添加data数据的参数？

点击选择文件就可以自动上传而不用自己点击上传