Fork me on GitHub

随笔分类 - javascript

ajax上传文件

当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写法: ``` <form class="ui form error-page" id="error_page" method="post" action="{{ url('web/save/error-page') }}" enctype="multipart/form-data"> <input type="file" name="upload_item_value[0]" > <input type="file" name="upload_item_value[1]" > <input type="file" name="upload_item_value[2]"> </form> <div class="ui green button save">保存</div> ``` 2.ajax写法(借助于Jquery.form): ``` $(document).ready(function () { var options = { success: function (data) { //成功后的操作 } }; $(".save").click(function () { $("#error_page").ajaxSubmit(options); }); }); ``` 3.后台接收情况(使用了laravel框架) ``` $files = $request->file('upload_item_value'); //可以通过遍历后,在使用laravel自带的方法处理上传文件 foreach ($file as $file) { $file->move('your_store_path', 'file_name'); } ```` jquery.form官网 :http://plugins.jquery.com/form/

ajax使用

# 1. get请求 ``` $.get(url [,data] [,function(msg){}回调函数] [, dataType]); ``` - data:给服务器传递的数据,请求字符串 、json对象 都可以设置 - funtion(msg){}:回调函数,ajax成功请求后调用该函数,可以在此函数完成ajax的后续处理,msg泛指从服务器传递回来的信息 - dataType:服务器返回数据类型,html、text、xml、json # 2. post请求 ``` $.post(url [,data] [,fn回调函数] [, dataType]); ``` 该方法与$.get()方法使用完全一致,不同的是其为post方式请求 给服务器传递数据的时候,不需要设置header头 (以上两种ajax请求是异步的,如果需要设置同步请求,就换其他方法) 异步也就是不用等待 # 3. ajax方法 ``` $.ajax({ //json对象 url:请求地址, [data]:给服务器传递的数据(请求字符串/json对象) [dataType]:默认字符串返回信息,数据从服务器返回格式html、text、xml、json [type]:[get]/post请求方式 [success]:function(msg){} ajax成功请求后的回调函数,可以做后续处理使用 msg泛指服务器返回来的信息 相当于readyState==4的处理逻辑函数部分 async:[true]异步/false同步, cache:[true]缓存/false不缓存, }) ``` 以前遇到过使用ajax两层嵌套,这里放下代码,关键在于使用同步功能async:false, 默认是异步的 ``` $.ajax({ async:false, url:"geturl", data:{'test':test,'test1':test1} dataType:"json", type:"get", success:function(msg){ $.ajax({ url:"/spiderqueue/"+msg.url+"/"+msg.innerUrl, dataType:"json", type:"get", success:function(msg){ $.each(msg,function(i,k){//追加所有的子<option> $("#parent_item").append("<option value="+i+">"+k+"</option>"); }); } }) } }) ```

form表单提交和重置小结

# 1. input标签 - 1.1>input[type=submit] ``` <form name=”form” method=”post” action=”#"> <input type=”submit” name=”btn” value=”提交"> </form> ``` input的type属性是submit,**会引发表单提交**。 作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>'提交'; - 1.2>input[type=button] input的type属性还可以是button,这时它只是一个按钮,**不会引发表单提交**。 ``` <form name=”form” method=”post” action=”#"> <input type=”button” name=”btn” value=”提交"> </form> ``` # 2. button[type=submit] type的默认值是submit,所以点击一个button,**会引起表单提交** **注意**:button[type]在IE中的默认值是button,这意味着它只是一个按钮而不会引发表单提交, 请注意设置type=submit来兼容IE。 button可以设置name和value,提交表单时,value会被作为表单数据提交给服务器, ``` <form> <input type="text" name='name'> <button>提交</button> </form> ``` # 3. 用法举例 ``` <form id="myform" name="myform" method="post action="/form-submit"> <input type="submit" value="Submit普通提交"> <input type="button" id="ajaxBtn" value="AJAX提交" /> <input type="button" id="jqueryBtn" value="jQuery提交" /> <input type="button" id="jsBtn" value="JS提交" /> </form> ``` ``` <script type="text/javascript"> //ajax提交 $("#ajaxBtn").click(function() { //可以获取表单的所有提交信息 var params = $("#myform").serialize(); $.ajax( { type : "POST", url : "/form-submit", data : params, success : function(msg) { alert("success: " + msg); } }); }) //jQuery提交 $("#jqueryBtn").click(function(){ //可以修改表单属性,比如action,这样可以使用一个表单,提交到不同处理器 //$('#myform').attr('action','/form-submit'); $("#myform").submit(); }) //js提交 $("#jsBtn").click(function(){ //document.myform.action="/form-submit"; document.myform.submit(); }) </script> ``` # 4. 表单重置 - 1:通过from的id实现 ``` document.getElementById("formId").reset(); ``` 注意,JQuery中没有直接的reset方法,需要像下面这样写 ``` $('#formId')[0].reset(); ``` - 2:通过Name实现 ``` document.formName.reset(); ``` - 3:直接给input传空值 ``` $("input").val(""); $("input[type='text']").val('') $("input[type='checkbox']").removeAttr('checked') ``` # 参考: http://www.tuicool.com/articles/3my6Rf http://blog.csdn.net/itmyhome1990/article/details/41849175?utm_source=tuicool&utm_medium=referral

批量上传图片(jQuery-File-Upload使用)

# jQuery-File-Upload jQuery-File-Upload是一个jquery下的ajax文件上传插件,支持批量上传,github地址:https://github.com/blueimp/jQuery-File-Upload。 官方有个基本的使用教程,如果没有特别需求可以参考这个简单使用 https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin 官方的demo地址,感兴趣可以对照源码分析下,demo分别对应源码basic-plus.html,basic.html等文件 https://blueimp.github.io/jQuery-File-Upload/ # 批量上传图片 **需要引入的css和js文件** ``` <link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload.css')}}"> <link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload-ui.css')}}"> ``` ``` <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.ui.widget.js')}}"></script> <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.fileupload.js')}}"></script> <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.iframe-transport.js')}}"></script> ``` 下载地址 https://github.com/blueimp/jQuery-File-Upload/releases ,下载后解压,将上面需要的文件放入项目相应目录。 **html代码** ``` <meta name="csrf-token" content="{{ csrf_token() }}"> ``` ``` <form id="submit_form" action="{{route('work.store')}}" method="post"> {{csrf_field()}} <table class="add_tab"> <tbody> <tr> <th>图片:<a id="start"></a></th> <td> <input id="fileupload" type="file" name="files[]" data-url="{{route('batch-upload', ['works'])}}" multiple> <input id="file_path" type="hidden" name="file_path"> </td> </tr> <tr> <th></th> <td> <div> <div id="progress" style="width:50%;float:left"> <div class="bar" style="width: 0%;height:18px;background:green;"></div> </div> <div id="upload_finish" style="display:none;float:left;margin-left:15px;height:18px;line-height:18px;">上传完成</div> </div> <div style="clear:both"></div> <div id = "upload_list"> </div> </td> </tr> <tr> <th></th> <td> <input type="submit" value="提交"> <input type="button" class="back" onclick="history.go(-1)" value="返回"> </td> </tr> </tbody> </table> </form> ``` **实现的js代码** ``` $(function () { $('#fileupload').fileupload({ dataType: 'json', singleFileUploads: false, beforeSend: function(xhr) { $('#upload_finish').hide(); $('#progress .bar').css( 'width', '0%' ); xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content')); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); if (progress == 100) { $('#upload_finish').show(); } }, done: function (e, data) { var files = data.result.data for (i in files) { $('#upload_list').append('<img src="' + files[i]+ '" alt="" style="max-width: 350px; max-height:100px;margin:5px;">'); } $('#file_path').val(files); } }); }); ``` **laravel后台处理** ``` Route::post('batch-upload/{dir_name}', '[email protected]')->name('batch-upload'); ``` ``` public function batchUpload(Request $request, $dir_name) { try{ $file_path = []; if($request->hasFile('files')){ $files = $request->file('files'); foreach ($files as $file) { $entension = $file->getClientOriginalExtension(); $new_name = date('YmdHis').mt_rand(10000,99999).'.'.$entension; $file_dir = public_path().'/uploads/'.$dir_name; $file->move($file_dir,$new_name); $file_path[] = '/uploads/'.$dir_name.'/'.$new_name; } } return $this->success($file_path);; }catch(\Exception $e){ return $this->error('文件上传失败,请刷新后重试'); } } ``` **注意:** - 1、ajax调用的时候需要考虑csrf问题, html中加入头信息 ``` <meta name="csrf-token" content="{{ csrf_token() }}"> ``` ``` beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content')); }, ``` - 2、一次上传多个文件,而不是循环调用 ``` singleFileUploads: false, ``` 上面配置是为了一次上传多个文件,否则的话是当你传入多个文件的时候会循环调用你的后台上传api。并且我在跑官方文档的时候发现,一次上传n个图片,会触发n次add回调,并且每次回掉获取data.files对象都是所有的n个文件,想要单独处理每个文件很麻烦,所以我直接每次自动上传,并且都是上传所有选中的文件。 **上传完成后效果** ![](http://markdown.archerwong.cn/2018-12-18-08-20-45_clipboard.png)