YiluPHP
这家伙很懒，什么都没有留下...
获赞
32

经验 使用jquery.form.min.js 异步上传图片

浏览数 190900

本示例基于jQuery以及相当出色的jquery.form插件，所以，先要载入jquery库和form插件。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

接着在页面中加入如下代码：
<div class="btn">
<span>添加附件</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="progress">
<span class="bar"></span><span class="percent">0%</span>
</div>
<div class="files"></div>
<div id="showimg"></div>
我们在html中放置一个添加附件的按钮元素.btn，以及进度条.progress，用于显示文件信息的.files和显示图片的#showimg 可以看出，我们用于上传文件的html中并没有出现form表单，而正常的上传功能是要依赖form表单的。我们的form表单是动态插入的，这样可以避免一个大表单中出现多个form。

jQuery
首先定义各种变量，注意动态将表单元素form插入到上传按钮部位，并且form的属性enctype必须设置为：multipart/form-data。然后当点击“上传附件”按钮，选择要上传的文件后，调用jquery.form插件的ajaxSubmit方法，如下代码说明。

$(function () {
  var bar = $('.bar');
  var percent = $('.percent');
  var showimg = $('#showimg');
  var progress = $(".progress");
  var files = $(".files");
  var btn = $(".btn span");
  $("#uploadimg").wrap("<form id='myupload' action='/uploadimg.php' method='post' enctype='multipart/form-data'></form>");
  $("<input type='hidden' name='_token' value='"+csrf_token+"'>").appendTo($("#myupload"));
  $("#uploadimg").change(function(){
    //选择文件
    $("#myupload").ajaxSubmit({
      dataType: 'json',
      //数据格式为json
      beforeSend: function() {
        // //开始上传
        // showimg.empty();
        // //清空显示的图片
        // progress.show();
        // //显示进度条
        // var percentVal = '0%';
        $("#imgview").attr('alt',  '0%');
        // //开始进度为0%
        // bar.width(percentVal);
        // //进度条的宽度
        // percent.html(percentVal);
        // //显示进度为0%
        // btn.html("上传中...");
        // //上传按钮显示上传中
      },
      uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        $("#imgview").attr('alt',  percentVal);
        // //获得进度
        // bar.width(percentVal);
        // //上传进度条宽度变宽
        // percent.html(percentVal);
        // //显示上传进度百分比
      },
      success: function(data) {
        // //成功
        // //获得后台返回的json数据，显示文件名，大小，以及删除按钮
        // files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
        // //显示上传后的图片
        // var img = "http://demo.helloweba.com/upload/files/"+data.pic;
        // showimg.html("<img src='"+img+"'>");
        // btn.html("添加附件");
        // //上传按钮还原
        layer.alert(data.msg);
        if (data.code===0) {
          $("#imgview").attr('src', data.data).show();
          $("#imginput").val(data.data);
        }
        $("#uploadimg").empty();
      },
      error:function(xhr){
        // //上传失败
        // btn.html("上传失败");
        // bar.width('0');
        // files.html(xhr.responseText);
        // //返回失败信息
      }
    });
  });
});



我来说说