php使用jquery Form 實(shí)現(xiàn)頁面無刷新上傳圖片,并預(yù)覽圖片

一、jquery.form.js下載地址

jquery.form.js下載地址

二、jquery.form.js使用方法如下:

函數(shù)名 描述 參數(shù) 例子
ajaxForm() 增加所有需要的事件監(jiān)聽器,為ajax提交表單做準(zhǔn)備。ajaxForm并不能提交表單。在document的ready函數(shù)中,使用ajaxForm來為ajax提交表單進(jìn)行準(zhǔn)備。 單進(jìn)行準(zhǔn)備。接受0個(gè)或1個(gè)參數(shù)。參數(shù)可以是一個(gè)回調(diào)函數(shù),也可以是一個(gè)Options對象。 $("#formid").ajaxForm();
ajaxSubmit() 使用ajax提交表單。 接受0個(gè)或1個(gè)參數(shù)。參數(shù)可以是一個(gè)回調(diào)函數(shù),也可以是一個(gè)Options對象。 $("#formid").ajaxSubmit();
formSerialize() 將表單串行化(或序列化)為一個(gè)查詢字符串。這個(gè)方法將返回以下格式的字符串:name1=value1&name2=value2。 $("#formid").formSerialize();
fieldSerialize() 將表單的字段元素串行化(或序列化)為一個(gè)查詢字符串。當(dāng)只有部分表單字段需要進(jìn)行串行化(或序列化)時(shí),使用這個(gè)就很方便了。 返回以下格式的字符串:name=value1&name2=value2。 $("#formid").formSerialize();
fieldValue() 返回匹配插入數(shù)組中的表單元素值。該方法以數(shù)組的形式返回?cái)?shù)據(jù)。如果元素值被判定可能無效,則數(shù)組為空。 $("#formid: password").fieldValue();
resetForm() 將表單恢復(fù)到初始狀態(tài)。 $("#formid").resetForm();
clearForm() 清除表單元素。該方法將所有的text、password、textarea置空,清除select元素中的選定,以及所有radio按鈕和checkbox按鈕重置為非選定狀態(tài)。 $("#formid").clearForm();
clearFields() 清除字段元素。只有部分表單元素需要清除時(shí)方便使用。 $("#formid .specialFields").clearFields();



三、options對象參數(shù):

參數(shù) 描述 默認(rèn)值
target 指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè)
jQuery選擇器字>符串、一個(gè)jquery對象、一個(gè)DOM元素。
默認(rèn)值:null
url 指定提交表單數(shù)據(jù)的URL。 默認(rèn)值:表單的action屬性值
type 指定提交表單數(shù)據(jù)的方法(method):"GET"或"POST"。 默認(rèn)值:GET
beforeSubmit 表單提交前被調(diào)用的回調(diào)函數(shù)。如果回調(diào)函數(shù)返回false表單將不被提
交。回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù):數(shù)組形式的表單數(shù)據(jù),jQuery表單對
象,以及傳入ajaxForm/ajaxSubmit中的Options對象。
默認(rèn)值:null
success 表單成功提交后調(diào)用的回調(diào)函數(shù)。然后dataType選項(xiàng)值決定傳回
responseText還是responseXML的值。
默認(rèn)值:null
dataType 返回的數(shù)據(jù)類型:null、"xml"、"script"、"json"其中之一。 默認(rèn)值:null
resetForm 表示如果表單提交成功是否進(jìn)行重置。 默認(rèn)值:null
clearForm 表示如果表單提交成功是否清除表單數(shù)據(jù)。 默認(rèn)值:null



四、例子如下:

demo.html代碼如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ajax表單處理</title>
</head>
<body>
    上傳圖片:<input type="file" name="banner" id="banner"/>
    預(yù)覽圖片:<img src="" id="banner_see">
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
    $('#banner').on('change', function () {
        if ($("#mbanner").length > 0) {

        } else {
                $("#banner").wrap("<form id='mbanner' action='demo.php' method='post' xenctype='multipart/form-data'></form>");
                }
       /*ajax提交*/
        $("#mbanner").ajaxSubmit({
              dataType: 'json',
              beforeSend: function () {

              },
              uploadProgress: function (event, position, total, percentComplete) {

              },
              success: function (data) {
                  if (data.result == 'true') {
                       $('#banner_see').attr('src',data.img);
                  } else {
                       $('#banner').val("");
                 }
             },
             error: function (xhr) {
                        
             }
        });
   });
</script>

demo.php代碼如下:

<?php
    if (file_exists("./" . $_FILES["banner"]["name"]))
    {
      $arrRet=array(
        'result'=>'false'
        );
      
    }
    else
    {
      $ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./" . $_FILES["banner"]["name"]);
      if($ret){
          $arrRet=array(
            'result'=>'true',
            'img'=> $_FILES["banner"]["name"]
            );
        }else{
            $arrRet=array(
                'result'=>'false'
            );
        }
    }
    echo json_encode($arrRet);
?>

結(jié)果如下圖:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容