很久开始前就用这个插件了,每次都忘记具体的调用方法,特地写个 demo 记录下。 先上这个 demo 的传送门,恩!然后开始了...
①先是 html
- <a href="javascript:void(0)" class="j_upLoadFile">
- 上传图片
- </a>
- <form action="接口名字" method="post" enctype="multipart/form-data" id="submitForm">
- <!-- 随文件一起上传的字段 -->
- <input type="hidden" name="type" value="temp">
- <input type="file" name="pic_name" style="display: none" class="j_file">
- </form>
将真正的文件上传按钮隐藏(因为它太丑了),自己定义个 ".j_uploadFile" 的触发按钮,到时候和 form 里的文件按钮相关联就好了。
②引入 jqueryForm
- <script src="libs/jquery.min.js">
- </script>
- <script src="libs/jquery.form.min.js">
- </script>
③重点来了
- <script>
- //点击上传图片
- $('.j_upLoadFile').click(function(){
- $('.j_file').click();
- });
- //选择了新文件
- $('.j_file').change(function(){
- //如果文件为空
- if($(this).val() == ''){
- return;
- }
- $('#submitForm').ajaxSubmit({
- type:'post',
- dataType:'json',
- success:function(result){
- //请求成功后的操作
- //并且清空原文件,不然选择相同文件不能再次传
- $('.j_file').val('');
- },
- error:function(){
- //并且清空原文件,不然选择相同文件不能再次传
- $('.j_file').val('');
- }
- });
- })
- </script>
点击假的上传按钮记得同时触发真正的 file 按钮,当上传按钮的 value 改变值(即打开文件夹你选择新的文件,点确定时),会触发 ajaxSubmit 函数,上传整个 form 表单,别忘了在请求成功或失败,都要清空 file 值,不然第二次选择相同的文件,等于 value 没变,不给上传的。
来源: http://www.jb51.net/article/114594.htm