JQuery是一款极为流行的JavaScript库,其拥有强大的DOM操作和AJAX支持等特点,因此常被开发人员广泛使用。同时,JQuery还拥有丰富的插件,其中包括了一些用于文件上传的插件,本文就将介绍一款jquery无刷新上传插件。
这款插件包含了以下几个部分:
1. HTML表单 2. JS脚本 3. 服务器端上传脚本
HTML表单代码如下:
<form id="form-id" method="post" enctype="multipart/form-data"> <input type="file" id="file-id" name="file"> <input type="button" id="upload-id" value="上传"> </form>
JS脚本需要先引入JQuery库,然后引入jquery.form.js插件。代码如下:
$(function(){ $('#upload-id').click(function(){ $('#form-id').ajaxForm({ url:'upload.php', type:'post', dataType:'text', success:function(data){ alert(data); } }); $('#form-id').submit(); }); });
服务器端上传脚本示例代码如下:
<?php $name = $_FILES['file']['name']; $tmp_name = $_FILES['file']['tmp_name']; move_uploaded_file($tmp_name, 'uploads/' . $name); echo '上传成功,文件名为:' . $name; ?>
在使用这款插件时,需要注意以下几点:
1. 需要在HTML表单中使用enctype="multipart/form-data"属性,以支持上传文件; 2. 在JS脚本中,需要引用jquery.form.js插件,这个插件提供了ajaxForm()方法,支持无刷新上传文件; 3. 在服务器端,需要对上传文件进行处理,这里使用的PHP move_uploaded_file()方法将上传文件移动到指定的目录下;
总之,这款jquery无刷新上传插件实现起来非常简单,使用起来也非常方便,是网页开发者必备的工具之一。