月度归档： 2016年12月

CI php图片异步上传

leokim / / PHP, 记事

comment.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//上传图片
function uploadImage(file_id, file_name, image_hidden){
    $.ajaxFileUpload({
        url: '/Admin/Upload/Index', //用于文件上传的服务器端请求地址
        secureuri: false, //是否需要安全协议，一般设置为false
        dataType: 'json', //返回值类型 一般设置为json
        fileElementId: file_id, //文件上传域的ID
        data: {file_name:file_name},
        success: function(data){ //服务器成功响应处理函数 html为返回值，status为执行的状态
            if ('success' == data.status) {
                var s = data.data;
                s=s.split('/');
                var file_name='<span> '+s[8]+' </span>';
                var hd_input = '<input type="button" value="上传成功" disabled="disabled">';
                $('#'+ image_hidden).val(data.data);
                $('#'+file_id).css('display','none');
                $(file_name).insertAfter('#'+ file_id);
                $(hd_input).insertAfter('#'+ file_id);
            } else {
                alert(data.info);
            }
        },
        error: function (data, status, e){ //服务器响应失败处理函数
            alert(e);
        }
    });
    return false;
}
 
//多文件上传
function add_more_file(image_hidden, result_dom_id, s){
    if(!result_dom_id){
        result_dom_id = 'file_str';
    }
    var random = new Date().getTime() + Math.floor(1+Math.random()*(9999999-1000000));
    var file_input = '<input class="form-control upload_file" value="" \
        name="f'+random+'" id="f'+random+'" type="file" \
        onchange="uploadMultipleImage(\'f'+random+'\',\'f'+random+'\',\''+result_dom_id+'\',\''+s+'\')"> \
        <input type="button" id="f'+random+'_hd" value="上传成功" disabled="disabled" style="display:none"> \
        <br>';
 
    $("#"+image_hidden).append(file_input);
}
 
function uploadMultipleImage(file_id, file_name, image_hidden, up_url){
    $.ajaxFileUpload({
        url: '/admin/adminpanel/Upload/index', //用于文件上传的服务器端请求地址
        secureuri: false, //是否需要安全协议，一般设置为false
        dataType: 'json', //返回值类型 一般设置为json
        fileElementId: file_id, //文件上传域的ID
        data: {file_name:file_name,up_url:up_url},
        success: function(data){ //服务器成功响应处理函数 html为返回值，status为执行的状态
            if ('success' == data.status) {
                var old_data = $('#'+ image_hidden).val();
                if(old_data == ""){
                    var file_content = data.data;
                }else{
                    var file_content = old_data+'|'+data.data;
                }
 
                var s = data.file_name;
                var file_name='<span><img style="padding-top:10px;width:150px;" src="/admin/../uploadfile/samplepiece/'+s+'"> </span>';
                $('#'+ image_hidden).val(file_content);
                $('#'+file_id).css('display','none');
                $(file_name).insertAfter('#'+ file_id);
            } else {
                alert(data.info);
            }
        },
        error: function (data, status, e){ //服务器响应失败处理函数
            alert(e);
        }
    });
    return false;
}

ajaxfileupload.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
jQuery.extend({
 
 
    createUploadIframe: function(id, uri)
   {
         //create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
         if(window.ActiveXObject)
         {
                if(typeof uri== 'boolean'){
               iframeHtml += ' src="' + 'javascript:false' + '"';
 
                }
                else if(typeof uri== 'string'){
               iframeHtml += ' src="' + uri + '"';
 
                }
         }
         iframeHtml += ' />';
         jQuery(iframeHtml).appendTo(document.body);
 
            return jQuery('#' + frameId).get(0);
    },
    createUploadForm: function(id, fileElementId, data)
   {
      //create form
      var formId = 'jUploadForm' + id;
      var fileId = 'jUploadFile' + id;
      var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
      if(data)
      {
         for(var i in data)
         {
            jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
         }
      }
      var oldElement = jQuery('#' + fileElementId);
      var newElement = jQuery(oldElement).clone();
      jQuery(oldElement).attr('id', fileId);
      jQuery(oldElement).before(newElement);
      jQuery(oldElement).appendTo(form);
 
 
 
      //set attributes
      jQuery(form).css('position', 'absolute');
      jQuery(form).css('top', '-1200px');
      jQuery(form).css('left', '-1200px');
      jQuery(form).appendTo('body');
      return form;
    },
 
    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout      
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()
      var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
      var io = jQuery.createUploadIframe(id, s.secureuri);
      var frameId = 'jUploadFrame' + id;
      var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
      {
         jQuery.event.trigger( "ajaxStart" );
      }
        var requestDone = false;
        // Create the request object
        var xml = {}
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
      {
         var io = document.getElementById(frameId);
            try
         {
            if(io.contentWindow)
            {
                xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
 
            }else if(io.contentDocument)
            {
                xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                   xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
            }
            }catch(e)
         {
            jQuery.handleError(s, xml, null, e);
         }
            if ( xml || isTimeout == "timeout")
         {
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
               {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
 
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e)
            {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }
 
                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );
 
                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );
 
                // Process result
                if ( s.complete )
                    s.complete(xml, status);
 
                jQuery(io).unbind()
 
                setTimeout(function()
                           {  try
                              {
                                 jQuery(io).remove();
                                 jQuery(form).remove();
 
                              } catch(e)
                              {
                                 jQuery.handleError(s, xml, null, e);
                              }
 
                           }, 100)
 
                xml = null
 
            }
        }
        // Timeout checker
        if ( s.timeout > 0 )
      {
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try
      {
 
         var form = jQuery('#' + formId);
         jQuery(form).attr('action', s.url);
         jQuery(form).attr('method', 'POST');
         jQuery(form).attr('target', frameId);
            if(form.encoding)
         {
            jQuery(form).attr('encoding', 'multipart/form-data');
            }
            else
         {
            jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();
 
        } catch(e)
      {
            jQuery.handleError(s, xml, null, e);
        }
 
      jQuery('#' + frameId).load(uploadCallback  );
        return {abort: function () {}};
 
    },
    handleError: function( s, xhr, status, e )        {
       // If a local callback was specified, fire it
             if ( s.error ) {
                s.error.call( s.context || s, xhr, status, e );
             }
 
             // Fire the global callback
             if ( s.global ) {
                (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
             }
          },
    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
 
        return data;
    }
})

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="form-group">
 
    <div class="col-lg-6">
        <input type="hidden" id="file_str" value="{$info['attachment']}" name="attachment"/>
        <input class="form-control upload_file" value="" name="f0" id="f0" type="file" multiple="true" onchange="uploadMultipleImage('f0','f0','file_str','samplepiece')">
        <a href="javascript:void(0);" class="add_more_file" ></a>
        <div id="more_file"></div>
    </div>
    <div class="col-lg-2">
        <div class="btn-group">
            <button onclick="add_more_file('more_file','','samplepiece')" class="btn btn-primary dropdown-toggle add_more_file" type="button">继续添加</button>
        </div>
    </div>
 
</div>

uplolad.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
class Upload extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
    }
 
    function Index($fieldName = '')
    {
        $post = $this->input->post();
        $up_url = isset($post['up_url']) ? $post['up_url'] : '';
        $upload_path = '../uploadfile/'.$up_url.'/';
 
        $config['upload_path'] = $upload_path;
        $config['allowed_types'] = 'gif|jpg|png';
//        $config['max_size'] = $this->method_config['upload'][$fieldName]['upload_size'];
        $config['overwrite'] = FALSE;
        $config['encrypt_name'] = false;
        $config['file_name'] = date('Ymdhis') . random_string('nozero', 4);
 
        dir_create($upload_path);//创建正式文件夹
        $this->load->library('upload', $config);
 
        //获取原文件名
        $file = $_FILES;
 
        foreach($file as $k => $v){
            if (!$this->upload->do_upload($k)){
                echo json_encode($this->upload->display_errors());
                exit;
            }
        }
 
        $filedata = $this->upload->data();
        $filedata['status'] = 'success';
        echo json_encode($filedata);
    }
}