jQuery-File-Upload 插件使用

WINDevelops 2015-06-16

展开全文

JSP:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java./jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java./jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java./jsp/jstl/fmt" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=basePath%>js/jquery.fileupload/vendor/jquery.ui.widget.js"></script>

<script type="text/javascript" src="<%=basePath%>js/jquery.fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.fileupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.fileupload/cors/jquery.xdr-transport.js"></script>

以下可选：

JS:

<dl>
                <dt>上传文件：</dt>
                <dd>
                    <input id="datafile_input" type="file" name="dataFile" data-url="uploadData.html" multiple
                        onclick="JavaScript:document.getElementById('upload_info').innerHTML    ='选择文件上传.';"
                    >
                    <input type="hidden" name="datafilename" id="datafilename" value="">
                    <input type="hidden" name="docstorelocation" value="" id="docstorelocation">
                    <%--class="required" <input type="button" id="uploadButton" value="上传图片" />--%>
                    <span class="info" style="font-weight: bold;" id="upload_info">选择文件上传.</span>
                    <div id="imgEle" />
                </dd>

            </dl>
            <div class="divider"></div>

            <dl>
                <dt>文件内容：</dt>
                <dd>
                    <textarea rows="10" cols="135" name="dataContent" id="dataContent" >${dataContent}</textarea>
                    <span class="info">解析后的文件内容</span>
                </dd>
            </dl>
            <div class="divider"></div>

=

最终使用的JS:

=

其他JS：

$(function(){
     //上传图片
     $("#btnUpload2").click(function() {
        $.ajax({
                //提交数据的类型 POST GET
                type:"POST",
                //提交的网址
                url:"uploadData.html",
                //提交的数据
                data:{Name:"sanmao",Password:"sanmaoword"},
                //返回数据的格式
                datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
                //在请求之前调用的函数
                beforeSend:function(){$("#msg").html("logining");},
                //成功返回之后调用的函数
                success:function(data){
                   $("#msg").html(decodeURI(data));
                    },
                //调用执行后调用的函数
                complete: function(XMLHttpRequest, textStatus){
                   alert(XMLHttpRequest.responseText);
                   alert(textStatus);
                    //HideLoading();
                },
                //调用出错执行的函数
                error: function(){
                    //请求出错处理
                }
             });
     });
});

function test(){
       $.ajax({
                //提交数据的类型 POST GET
                type:"POST",
                //提交的网址
                url:"uploadData.html",
                //提交的数据
                data:{Name:"sanmao",Password:"sanmaoword"},
                //返回数据的格式
                datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
                //在请求之前调用的函数
                beforeSend:function(){$("#msg").html("logining");},
                //成功返回之后调用的函数
                success:function(data){
                   $("#msg").html(decodeURI(data));
                    },
                //调用执行后调用的函数
                complete: function(XMLHttpRequest, textStatus){
                   alert(XMLHttpRequest.responseText);
                   alert(textStatus);
                    //HideLoading();
                },
                //调用出错执行的函数
                error: function(){
                    //请求出错处理
                }
             });

    }

    $(function(){
       //上传图片
       $("#btnUpload").click(function() {
               //alert(uploadFile());
              $.ajaxFileUpload({
                   url:"uploadData.html",            //需要链接到服务器地址
                   secureuri:true,
                   fileElementId:'file',                        //文件选择框的id属性
                   success: function(data, status){
                          alert("111111111111");
                       var results = $(data).find('body').html();
                       var obj = eval("("+results+")");
                       $("#fileSize").val(obj.fileSize);
                       $("#fileUrl").val(obj.fileUrl);
                       $('#fileCatalogForm').submit();
                   },error: function (data, status, e){
                           showDialogWithMsg('ideaMsg','提示','文件错误！');
                   }
               });
       });
    });
    function uploadFile(){
        $.ajaxFileUpload({
                url:"uploadData.html",            //需要链接到服务器地址
                secureuri:true,
                fileElementId:'file',                        //文件选择框的id属性
                success: function(data, status){
                    var results = $(data).find('body').html();
                    var obj = eval("("+results+")");
                    $("#fileSize").val(obj.fileSize);
                    $("#fileUrl").val(obj.fileUrl);
                    $('#fileCatalogForm').submit();
                },error: function (data, status, e){
                        showDialogWithMsg('ideaMsg','提示','文件错误！');
                }
            });
    }

=

controller(SpringMVC):

    @RequestMapping("uploadData.html")
    @ResponseBody
    public ModelMap uploadData(ModelMap modelMap, HttpServletRequest request, //
            @RequestParam(value = "dataFile", required = false) MultipartFile dataFile) {

        String dataContent = DateUtil.getLocalDate() + "    美国出动直升机搜索越狱嫌犯。34岁的戴维·斯韦阿特和48岁的理查德·马特从纽约州安保措施最为严密的克林顿监狱钻墙越狱。";
        int flag = 1;
        String info = "上传并解析完成！";
        String relativePath = "";

        String newfileName = "";// 新文件名称
        String fileName = "";// 原文件名称
        try {

            String uploadDir = InitializeListener.ROOT_PATH + InitializeListener.DATA_IMG_PATH;
            File dirPath = new File(uploadDir);
            if (!dirPath.exists()) {
                dirPath.mkdirs();
            }

            fileName = dataFile.getOriginalFilename();

            String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());
            newfileName = System.currentTimeMillis() + fileType;
            File uploadedFile = new File(uploadDir + File.separator + newfileName);
            relativePath = InitializeListener.DATA_IMG_PATH + "/" + newfileName;
            System.out.println("file absolute path:" + uploadedFile.getAbsolutePath());
            System.out.println("file relative path:" + relativePath);
            FileCopyUtils.copy(dataFile.getBytes(), uploadedFile); // 复制图片

            /*
            * 此处解析图片获取内容
            */
            //dataContent = xxx(uploadedFile.getAbsolutePath());

            modelMap.put("absolutePath", uploadedFile.getAbsolutePath());
            modelMap.put("fileName", fileName);
            modelMap.put("newfileName", newfileName);
            modelMap.put("info", info);
            modelMap.put("upload", flag);
            modelMap.put("relativePath", relativePath);
            modelMap.put("dataContent", dataContent);
        } catch (Exception e) {
            e.printStackTrace();
            info = "上传或解析失败！";
            flag = 0;
        }

        return modelMap;

    }

=

jQuery File Upload-jQuery File Upload的最简模型

http://blog.csdn.net/violet_day/article/details/17231425

jQuery File Upload的最简模型

jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，根据官方的例子可以知道，一个最简单的jQuery File Upload上传组件，必须包括以下文件：

jQuery核心库，建议使用jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js ： jQuery UI Widget
js/jquery.iframe-transport.js ：扩展iframe数据传输
js/jquery.fileupload.js ： jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题

此时只需要加载一个上传按钮

[html] view plain copy

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

以及一行代码

[html] view plain copy

$('#fileupload').fileupload();

就完成了一个最基本的上传组件。这个最简单的上传组件可以将选中的文件以表单形式提交到data-url约定的URL，同时提供了足够多的设置和基础事件可供扩展。

jQuery File Upload的简单扩展

对于最简模型，稍加扩展就可以实现一些比较常用的功能，比如可以在上传完毕后可以显示一个简单的结果：

[javascript] view plain copy

$('#fileupload').fileupload({
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name + ' uploaded').appendTo($("body"));
});
}
});

或者显示上传进度，配合一些进度条组件就可以构成一个上传进度条

[javascript] view plain copy

$('#fileupload').fileupload('option', {
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(progress + '%');
}
});

等等。只要多阅读手册就可以配合项目做更具体的扩展开发。

XHR响应为Json时IE的下载BUG

这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。

解决这个问题的方法是必须将相应的Http Head从

[html] view plain copy

Content-Type: application/json

更改为

[html] view plain copy

Content-Type: text/plain

具体的实现根据服务端不同有所区别，比如ZF2中可以在Controller中这样写：

[php] view plain copy

$this->getServiceLocator()->get('Application')->getEventManager()->attach(\Zend\Mvc\MvcEvent::EVENT_RENDER, function($event){
$event->getResponse()->getHeaders()->addHeaderLine('Content-Type', 'text/plain');
}, -10000);

这也是我在stackoverflow上的对ZF2更改最终响应类型的一个回答

jQuery File Upload UI的构成与说明

为了引入更多功能，jQuery File Upload在上面最简模型的基础上又实现了一套jQuery File Upload UI，也就是官方给出的最终Demo，这套UI额外提供了以下功能：

最大/最小文件限定 Options.maxFileSize / Options.mixFileSize
文件类型限定，通过正则表达式检测文件名实现 Options.acceptFileTypes
选择文件后自动上传 Options.autoUpload
上传文件数量限制，通过上传后将选择文件按钮置为Disabled实现 Options.maxNumberOfFiles
上传模板，就是选择文件后显示预览的html代码 Options.uploadTemplate
下载模板，当文件上传完毕后显示的html代码 Options.downloadTemplate

等等，同时还增加了一系列新的接口和事件，具体都可以查阅官方手册。

具体对应到文件为：

JavaScript-Templates : JS模板引擎
JavaScript-Load-Image : 图片预览功能
js/jquery.fileupload-ui.js & css/jquery.fileupload-ui.css ： UI核心类，CSS可以替换旧式的上传控件为统一的按钮
js/jquery.fileupload-fp.js：进度条扩展功能

也许正是因为附加功能太多，各功能之间耦合非常重，jQuery File Upload UI显得不够友好，主要体现在：

上述功能均无法拆分，必须统一全部加载
各功能需要界面存在相应元素，如果缺少某些元素，包括JS模板内的元素，整个UI无法正常工作
JS模板引擎对标签配对非常严格，标签如果遗漏也有可能引起UI无法正常工作

所以经验之谈是，在定制jQuery File Upload UI时，如果UI无法工作。首先检查js文件是否全部加载，然后检查页面元素是否齐全，再次检查JS模板标签是否严格配对，最后还可以查看页面是否有重复调用fileupload()方法。

jQuery File Upload UI构成元素

UI的部件都是硬编码的HTML class，无法更改。核心的几个部件为

全局控制按钮 (必须)

[html] view plain copy

<div class="fileupload-buttonbar">
<span class="fileinput-button"><input type="file" name="files[]" multiple></span>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete</button>
<input type="checkbox" class="toggle">
</div>

最外层容器为.fileupload-buttonbar，内部包含

文件选择按钮 .fileinput-button (必须)，内部必须包裹一个input:file
开始上传按钮 .start
取消上传按钮 .cancel
删除按钮 .delete
文件勾选按钮 .toggle

整体上传进度 (可选)

[html] view plain copy

<div class="fileupload-progress">
<div class="progress">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended"></div>
</div>

最外层容器为.fileupload-progress，内部包含

上传进度条容器.progress
上传进度条 .bar
上传进度文本 .progress-extended

文件显示容器 (必须)

[html] view plain copy

<div class="files"></div>

.file容器是最重要的UI部件，上传时的文件预览模板以及上传完毕后的文件显示模板都将显示在这里。

文件预览模板 (必须)

[html] view plain copy

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<div class="template-upload">
{% if (file.error) { %}
<div class="error">{%=file.error%}</div>
{% } else { %}
<div class="preview"><span class="fade"></span></div>
<div class="name"><span>{%=file.name%}</span></div>
<div class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="height:5px;"><div class="bar" style="width:0%;"></div></div>
<span class="start">
{% if (!o.options.autoUpload) { %}
<button>Start Upload</button>
{% } %}
</span>
{% } %}
<span class="cancel"><button>Cancel</button></span>
</div>
{% } %}
</script>

这部分逻辑不难读懂，由于文件选择是多选的，所以被选择文件一开始以数组方式存放，循环输出。即使我们加入最大文件只能上传一个，这里得到的仍然是数组形式。

当文件有任何错误时，如文件类型被禁止，文件大小不符合约定，会得到file.error。文件检测没有问题，则可以用以下元素控制当前文件：

开始上传当前文件按钮.start (必须)
取消上传当前文件按钮.cancel (可选)
当前文件上传进度.progress (可选)

上传后文件回调显示模板 (必须)

[javascript] view plain copy

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<div class="template-download">
{% if (file.error) { %}
<div class="error">{%=file.error%}</div>
<span class="cancel"><button class="btn btn-block"><i class="icon-ban-circle"></i>Cancel</span>
{% } else { %}
<div class="preview"><img src="{%=file.thumbnail_url%}"></div>
<div class="name"><span>{%=file.name%}</span></div>
<div class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>
<div class="delete"><button data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button>
</div>
{% } %}
</div>
{% } %}
</script>

这一部分的o.files完全来自服务器端的json响应，所以模板内容可以自由发挥。唯一被定制的元素为删除按钮.delete。点击这个按钮会向按钮中指定的url发送请求，比如

[html] view plain copy

<div class="delete"><button data-type="DELETE" data-url="/file/1">Delete</button></div>

点击后则会用DELETE方式发送HTTP请求

DELETE /file/1

jQuery File Upload UI工作流程

有了上面罗列的UI元素，就可以拼凑出一个简单的jQuery File Upload UI工作流程：

用户点击.fileinput-button选择要上传的文件（多个）
文件选择后，文件信息被整理为数组置入文件预览模板#template-upload
模板引擎循环处理文件信息并生成模板.template-upload
每生成一个模板，模板就被插入到文件显示容器.files的最后。
用户点击上传按钮.start上传，文件信息被转换为XHR请求至服务器端
UI获得服务器端生成JSON响应文件
JSON响应信息也被整理成数组置入回调显示模板#template-download
模板引擎循环处理文件信息并生成模板.template-download
每生成一个模板，会将此模板替换对应的.template-upload部分

定制过程

有了上面的基础，要个性化的定制jQuery File Upload就简单了很多：

限制文件类型

由于没有使用Flash空间，上传的文件选择框是无法限制文件类型的，所以所谓的限制文件类型，只能让用户选择文件之后，用file.error显示一个错误信息。例如本次需要限定可上传的文件为图片，那么Options指定：

[html] view plain copy

acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

即可。

在Google Chrome浏览器中，可以用input:file原生支持文件类型限定，可以配合使用：

<input type="file" name="upload[]"  accept="image/png, image/gif, image/jpg, image/jpeg">

不过在客户端做再多的限定也只是提升用户体验，不能真正保证安全性，所以不要忘记了在服务器端做同样的类型检测。

文件数量限制

只需在Options指定

maxNumberOfFiles : 1

即可。jQuery File Upload UI的处理方式是当用户上传一个文件后，文件选择按钮被置为Disabled。

这同样只是客户端的小把戏，真正想要严格的约束用户只能上传一个文件还是需要在服务器端通过Session做更加复杂的控制。

文件大小限制

Options中指定

maxFileSize: 5000000

即只允许单文件最大5MB。

Firefox disable bug

在Firefox环境下测试是，发现如果将文件数量限制为1，选择一次文件，刷新页面之后文件选择按钮会莫名其妙的被加上一个Disabled属性，导致无法点击。所以最终我们的初始化代码为：

[html] view plain copy

var uploader = $("#fileupload");
uploader.fileupload({
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxNumberOfFiles : 1,
maxFileSize: 5000000
});
uploader.find("input:file").removeAttr('disabled');

最后就是界面的一些调整，完整代码在EvaEngine的File模块下，点击查看.

定制jQuery File Upload为微博式单文件上传

ajaxfileupload.js问题汇总及解决附修复版下载（转）

收藏人：WINDevelops

2015-06-16 | 阅：1 转：2

| 来源

| 分享

使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。

问题：
1：无法带参数提交，只能上传文件；
2：运行时报：jQuery.handleError is not a function 错误；
3：执行成功后，始终指向error方法处理，无法执行sucess方法；

解决方法：
1：无法带参数提交，只能上传文件；
原作者一定是把这个代码当作练习来写的，只完成了文件提交这个功能。需要对代码做些许修改即可。有两处修改：
第一处是将原createUploadForm: function(id, fileElementId) 方法添加一个data参数，并将data中的数据拼接进去即可。代码如下：

<br />
    createUploadForm: function(id, fileElementId,data) {<br />
    //create form<br />
    var formId = &#39;jUploadForm' + id;<br />
    var fileId = &#39;jUploadFile' + id;<br />
    var form = jQuery(&#39;<form
 action="" method="POST" 
name="' + formId + '" 
id="' + formId + '" 
enctype="multipart/form-data"></form>');<br
 />
    var oldElement = jQuery(&#39;#' + fileElementId);<br />
    var newElement = jQuery(oldElement).clone();<br />
    jQuery(oldElement).attr(&#39;id', fileId);<br />
    jQuery(oldElement).before(newElement);<br />
    jQuery(oldElement).appendTo(form);
</p>
 
<p>
    /***** 增加参数的支持 *****/<br />
    if (data) {<br />
    for (var i in data) {<br />
    $(&#39;<input
 type="hidden" name="' + i + 
'" value="' + data[i] + 
'" />').appendTo(form);<br />
    }<br />
    }
</p>
 
<p>
    //set attributes<br />
    jQuery(form).css(&#39;position', 'absolute');<br />
    jQuery(form).css(&#39;top', '-1200px');<br />
    jQuery(form).css(&#39;left', '-1200px');<br />
    jQuery(form).appendTo(&#39;body');<br />
    return form;<br />
    },<br />
    

第二处是调用createUploadForm方法地方，如下所示：

2：运行时报：jQuery.handleError is not a function 错误；
这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError 方法，所以可以将1.4.2版本中的该方法复制到该js中。

3：执行成功后，始终指向error方法处理，无法执行sucess方法；
这个是由于ajaxfileupload.js 处理返回data的时候，没有考虑后台返回的是字符串的问题(即使返回的JSON格式数据，我们也大多喜欢转化为字符串来返回)。修改uploadHttpData方法：

带参数提交示例代码：

修复版ajaxfileupload.js 下载
百度网盘
 华为网盘

jQuery File Upload 的基本使用

http://doc./1995545/archive/122107.html

发表于5个月前(2015-01-04 14:32) 阅读（437） | 评论（0） 4人收藏此文章, 我要收藏

寻找会’偷懒’的开发者线下公开课，报名即享受免费体验云主机

摘要 jQuery File Upload 的基本使用

jQuery File Upload 的基本使用

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

一、最少配置

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script><script>$(function () {    $('#fileupload').fileupload({        dataType: 'json',        done: function (e, data) {            $.each(data.result.files, function (index, file) {                $('<p/>').text(file.name).appendTo(document.body);            });        }    });});</script></body> 
</html>

二、上传进度显示

$('#fileupload').fileupload({    /* ... */
    progressall: function (e, data) {        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(            'width',
            progress + '%'
        );
    }
});

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div> 
.bar {    height: 18px;
    background: green;}

附上官网API地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API

文档地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

jQuery-File-Upload 插件使用

www./articles/63mQN3

时间 2014-12-17 14:22:00 php教程博客

原文 http://www./jquery-file-upload.html

主题 JavaScript

作用：1、图片ajax提交 2、即时显示

插件地址：https://blueimp./jQuery-File-Upload/实例地址：http://www./jQuery-File-Upload-master/demo.html

使用步骤：

1、页面引入特定的js（至少引入一下4个js）

<script src="http://btc./js/jquery/1.9.1.min.js?=1.03"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

2、布置form表单

<form action="b.php" method="post">
<!-- 图片上传按钮 -->
<input id="fileupload" type="file" name="image" data-url="./a.php" multiple>
<!-- 图片展示模块 -->
<div class="files">
</div>
<div style="clear:both;"></div>
<!-- 图片上传进度条模块 -->
<div class="up_progress">
  <div class="progress-bar"></div>
</div>
<div style="clear:both;"></div>
<br/>
<button type="submit">Submit</button>
</form>

3、js编写以及css样式控制

<script type="text/javascript">
  //图片上传
  $("#fileupload").fileupload({
    dataType: 'json',
    add: function (e, data) {
      var numItems = $('.files .images_zone').length;
      if(numItems>=10){
        alert('提交照片不能超过3张');
        return false;
      }
      $('.up_progress .progress-bar').css('width','0px');
      $('.up_progress').show();
      $('.up_progress .progress-bar').html('Uploading...');
      data.submit();
    },
    done: function (e, data) {
      $('.up_progress').hide();
      $('.upl').remove();
      var d = data.result;
      if(d.status==0){
        alert("上传失败");
      }else{
        var imgshow = '<div class="images_zone"><input type="hidden" name="imgs[]" value="'+d.msg+'" /><span><img src="'+d.msg+'"  /></span><a href="javascript:;">删除</a></div>';
        jQuery('.files').append(imgshow);
      }
    },
    progressall: function (e, data) {
      console.log(data);
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('.up_progress .progress-bar').css('width',progress + '%');
    }
  });
  //图片删除
  $('.files').on({
    mouseenter:function(){
      $(this).find('a').show();
    },
    mouseleave:function(){
      $(this).find('a').hide();
    },
  },'.images_zone');
  $('.files').on('click','.images_zone a',function(){
    $(this).parent().remove();
  });
</script>
<style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
</style>

4、程序端代码编写

<?php
header('Content-type: application/json');

if($_FILES["image"]["error"]!=0){
  $result = array('status'=>0,'msg'=>'上传错误');
  echo json_encode($result);exit();
}

if( !in_array($_FILES["image"]["type"], array('image/gif','image/jpeg','image/bmp')) ){
  $result = array('status'=>0,'msg'=>'图片格式错误');
  echo json_encode($result);exit();
}

if($_FILES["image"]["size"] > 2000000){//判断是否大于2M
  $result = array('status'=>0,'msg'=>'图片大小超过限制');
  echo json_encode($result);exit();
}

$filename = substr(md5(time()),0,10).mt_rand(1,10000);
$ext = pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION);

$localName = "./imgs/".$filename.'.'.$ext;

if ( move_uploaded_file($_FILES["image"]["tmp_name"], $localName) == true) {
  $lurl = 'http://api./jQuery-File-Upload-master/'.$localName;
  $result  = array('status'=>1,'msg'=>$lurl);
}else{
  $result  = array('status'=>0,'msg'=>'error');
}
echo json_encode($result);

?>

5、就此完成

注：事件监控需要使用jquery的on函数

jQuery插件之ajaxFileUpload详细解析

http://www./htmlcss/21693.html

2015-01-16 0 个评论来源：u011014707的专栏

我要投稿

功能：ajaxFileUpload是一个异步上传文件的jQuery插件

语法：$.ajaxFileUpload([options])

options参数说明：

url　上传处理程序地址。

fileElementId　　　需要上传的文件域的ID，即的ID。

secureuri　　　　是否启用安全提交，默认为false。

dataType　　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。

success　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。

error　　　　　　提交失败自动执行的处理函数。

data 　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。

type 　　　　　　当要提交自定义参数时，这个参数要设置成post。

错误提示:

1，SyntaxError: missing ; before statement错误如果出现这个错误就需要检查url路径是否可以访问

2，SyntaxError: syntax error错误如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误

3，SyntaxError: invalid property id错误如果出现这个错误就需要检查文本域属性ID是否存在

4，SyntaxError: missing } in XML expression错误如果出现这个错误就需要检查文件name是否一致或不存在

5，其它自定义错误大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

使用方法：

1.先引入jQuery与ajaxFileUpload插件，注意先后顺序。

2.HTML代码段

3.js代码

$(function ()

{

$(:button).click(function ()

{

ajaxFileUpload();

})

function ajaxFileUpload()

{

$.ajaxFileUpload({

url: '/upload.aspx', //用于文件上传的服务器端请求地址

secureuri: false, //是否需要安全协议，一般设置为false

fileElementId: 'file1', //文件上传域的ID

dataType: 'json', //返回值类型一般设置为json

success: function (data, status) //服务器成功响应处理函数

{

$(#img1).attr(src, data.imgurl);

if (typeof (data.error) != 'undefined'){

if (data.error != '') {

alert(data.error);

} else {

alert(data.msg);

}

error: function (data, status, e)//服务器响应失败处理函数

{

alert(e);

}

})

return false;

}

</script>

4.后台页面upload.aspx代码

protected void Page_Load(object sender, EventArgs e)

{

HttpFileCollection files = Request.Files;

string msg = string.Empty;

string error = string.Empty;

string imgurl;

if (files.Count > 0)

{

files[0].SaveAs(Server.MapPath(/) + System.IO.Path.GetFileName(files[0].FileName));

msg = 成功! 文件大小为: + files[0].ContentLength;

imgurl = / + files[0].FileName;

string res = { error:' + error + ', msg:' + msg + ',imgurl:' + imgurl + '};

Response.Write(res);

Response.End();

}

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自： WINDevelops > 《Page、JS》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多

WINDevelops

关注对话

TA的最新馆藏

1000行代码读懂Spring（一）
Spring源代码解析(三）：Spring JDBC
Spring源码解析
httpclient设置连接超时读取数据超时
全文检索lucene中文分词的一些总结
基于字标注的中文分词方法 | 我爱自然语言处理

喜欢该文的人也喜欢更多

热门阅读换一换