jQuery插件之jQuery-file-upload上传图片后回显图片的简单功能

下载地址

下载地址

使用步骤
插件下载完成后，我们可以可以在项目中进行引用，使用插件提供的功能。

这个功能实现起来非常简单

1、引入js文件

• jquey-1.8.3.min.js

• jquery-ui-widget.js

• jquery.iframe-transport.js

• jquery.fileupload.js

并且我们使用 bootstrap 美化页面，所以需要引入 bootstrap样式

2、 HTML代码

    上传
    
    
    


        
        
    
    
    

一般网站上传的input的type属性的原本样式不是很好看，可以采用label 的锚点链接的方式，去进行美化

说明：
美化上传控件
出于美化目的，将文件域隐藏，设置label 的 for 属性的值为文件域的id，然后再对label 进行美化，这样点击label也能打开文件选择对话框

上传
    

上传进度

上传进度使用 h5 中新增的 progress 元素，并创建一个id为upload_info 的控件，用于在上传完成后显示完成信息

显示预览

此插件可以上传各种类型的文件，包括图片，所以我么在最后放了一个 img 元素，用于上传成功后进行图片预览，但由于图片尺寸比较小，又是在本地测试，所以最后我们测试上传进度显示时，会上传一个其他类型的文件，此 img 标签就没有用了

html中：



js中：
  done: function (e, data) {
            // 如果上传的图片，就取消下面代码的注释
            //$("#uploadimg").attr('src', data.result.url);
            $('#upload_info').html('上传完成')
        }

3、JS 代码

这是实现上传的核心代码

我们当前的要求如下

选择文件之后立即上传
上传过程中显示进度条
上传完成后显示提示文字“上传完成”
再次添加要上传的文件后，应该将提示文字“上传成功”清除

  $('#fileupload').fileupload({
    dataType: 'json',
    url: "handle_upload.php",//处理上传的php文件地址
    //设置进度条
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100);
      $('progress').val(progress);
    },
    //上传完成之后的操作，显示在img里面
    done: function (e, data) {
      // 如果上传的图片，就取消下面代码的注释
      //$("#uploadimg").attr('src', data.result.url);
      $('#upload_info').html('上传完成')
    }
  })
  // 用户再次选择文件后，清除提示文字，并设置进度条可见
  $('#fileupload').on('fileuploadadd', function () {
    $('.progress_box').css('display', 'block')
    $('#upload_info').html('')
  })

4、服务器端

'upload/'.$filename]);

说明：

因为服务器端文件名称不能重复，所以采用当前时间戳为上传的文件命名
上传成功后，应该以json格式返回文件路径

因为PHP的默认的上传文件的大小有一定的大小限制，所以上传较大文件，需要修改php.ini的默认配置文件

1)设置 php配置文件(php.ini)

配置项 默认值 功能描述
file_uploads ON 确定服务器上的PHP脚本是否可以接受HTTP文件上传
memory_limit 8M 设置脚本可以分配的最大内存量，防止失控的脚本独占服务器内存
upload_max_filesize 2M 限制PHP处理上传文件的最大值，此值必须小于post_max_size值
post_max_size 8M 限制通过POST方法可以接受的信息最大量
upload_tmp_dir NULL 上传文件存放的临时路径，可以是一个绝对路径。这个目录对于拥有此服

附上源代码：
文件目录结构：

HTML.index

    
    
    
    
    

    
    
    
    
    





    上传
    
    
    


        
        
    
    
    

server.php

'upload/'.$filename]);

最后附上 效果图如下：