利用jquery.form.js php上传美化上传按钮以及多选图片上传

1, 美化默认上传按钮

在谷歌和IE下使用默认的上传组件，如以下代码：

 <input type="file" name="userfile" id="xFile">

显示的界面都不一样也很丑，为了美化并且统一一下界面可以使用：

<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
 <input type="file" name="userfile" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">

样式：

.ui_button {
 display: inline-block;
 line-height: 38px;
 font-size: 14px;
 text-align: center;
 color: #545A6C;
 border: 1px solid #d0d0d5;
 border-radius: 4px;
 padding: 0 15px;
 min-width: 50px;
 background-color: #fff;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-transition: border-color .15s, background-color .15s;
 transition: border-color .15s, background-color .15s;
 outline: 0 none;
 cursor: pointer;
 overflow: visible;
}
.ui_button_primary, .ui_button_primary.disabled:hover, .ui_button_primary.ui_button_loading:hover {
 border: 1px solid #00a5e0;
 background-color: #00a5e0;
 color: #fff;
}

效果：

我们不管上传图片还是提交数据，默认的行为都会刷下一下或者是闪烁一下页面才能把数据提交到服务器，我们可以使用jquery.form.js插件其实也就是利用ajax提交数据。
jquery.form.js有两个核心方法 ajaxForm()和ajaxSubmit()
场景1：(推荐)
如果没有结合其他的插件使用上传功能的话，就单单使用jquery.form.js的话就直接使用ajaxForm()
有<form> 有<input type=”submit”>,代码可以直接如下：

$('#reg').ajaxForm();

这样就可以在刷新下实现提交数据的功能，也自动阻止了跳转默认行为。

场景2：
如果你使用的是jquery中submit()方法或者不是通过form提交的又要结合jquery.form.js，你就要使用ajaxSubmit()
使用jquery中的submit()方法下使用

$('#reg').submit(function(){
   $(this).ajaxSubmit();
   return false;
});

参数：

$('#reg').submit(function () {
  $(this).ajaxSubmit({
    url : 'test1.php', //向哪个页面提交数据
    target : '#box', //提交数据成功后返回的内容要存放的地方
    type : 'GET',
    dataType : null,
    clearForm : true, //数据提交成功后，清空表单，包括默认的设置好的value也清空
    resetForm : true, //数据提交成功后，重置表单，不清空默认设置好的value
    data : { //提交数据的同时自定义数据提交
      aaa : 'bbb',
    },
    beforeSubmit : function (formData, jqForm, options) {
    //提交之前执行，一般用于数据验证
    //alert(options.url); // 得到url值
    //alert(jqForm.html()); 得到form里面的html
    //alert(formData[0].name); //得到第一个input的name属性的值
    //alert(formData[0].value);//得到第一个input的value属性的值


    //如果数据验证不合法，就返回false，不让提交，返回true让提交
       return true;
    },
    success : function (responseText, statusText) {
      alert(responseText + statusText); //得到回调的内容 和状态(success)
    },
    error : function (event, errorText, errorType) {
      alert(errorText + errorType); //主要是errorType提示错误类型
    },
  });
  return false;
});
*/

//submit()方法没有阻止默认提交，需要自行阻止

//工具方法
//alert($('#reg').formSerialize());序列化表单的内容 user=123&pass=123
//alert($('#reg #user').fieldSerialize()); 获取某个input的值并序列化user=123
//alert($('#reg #user').fieldValue()); 获取某个input的值 123
//alert($('#reg').resetForm()); //重置整个表单
alert($('#reg #user').clearFields()); //清空某个表单

html:

<form id="reg" action="" method="">  //如果js中有设置url和type这里的action和method就没必要设置了
    <input> 
    <input type="submit" value="提交">
</form>

3,同时选取多图片上传 和 事先图片预览

最低兼容IE10

imgup

测试包：http://pan.baidu.com/s/1i4mzKYL

下载：jquery.form.min

———————-案例——————————-

txt_daima