淘先锋技术网

首页 1 2 3 4 5 6 7

JQuery是一款极为流行的JavaScript库,其拥有强大的DOM操作和AJAX支持等特点,因此常被开发人员广泛使用。同时,JQuery还拥有丰富的插件,其中包括了一些用于文件上传的插件,本文就将介绍一款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无刷新上传插件实现起来非常简单,使用起来也非常方便,是网页开发者必备的工具之一。