PHPはflashを使わないでファイルのアップロードを実現して、各種のブラウザと互換性があります
5016 ワード
ダイレクトコード
フロントエンドコード:
バックグラウンドコード:
Curlでファイルをアップロードする
フロントエンドコード:
<div class="fbpl_top_upload_img">
<p class="title"> </p>
<div class="fbpl_center_pad2" id="criticPictures_container">
<ul class="fbpl_top_upload_img_wrap clearfix" id="pic_container">
<li class=" fl add_newimg">
<p class="fileinput-button">
<input name="comment_image_file" id="fileupload" type="file" multiple>
</p>
</li>
</ul>
<div class="fbpl_center_bottom">
<lable><input type="checkbox" name="isAnonymous" id="isAnonymous" value="1"><i> </i></lable>
<input type="submit" id="btn_submit" class="fabiao" value=" ">
</div>
</div>
</div>
<link href="/public/css/jquery.fileupload.css" rel="stylesheet">
<script src="/public/js/fileupload/jquery.ui.widget.js"></script>
<script src="/public/js/fileupload/jquery.iframe-transport.js"></script>
<script src="/public/js/fileupload/load-image.all.min.js"></script>
<script src="/public/js/fileupload/jquery.fileupload.js"></script>
<script src="/public/js/fileupload/jquery.fileupload-process.js"></script>
<script src="/public/js/fileupload/jquery.fileupload-image.js"></script>
<script src="/public/js/jquery.placeholder.min.js"></script>
<script type="text/javascript">
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
//var url = "{{ upload_url }}?resourceType=comment_image&resourceId=1";
var url = '/commentUpload';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
// imageMaxWidth:600,
//imageMaxHeight:350,
add: function(e, data) {
var uploadErrors = [];
var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
uploadErrors.push(' ');
}
if( data.originalFiles[0]['size'] > 5000000) {
uploadErrors.push(' ');
}
if(uploadErrors.length > 0) {
alert(uploadErrors.join("
"));
} else {
data.submit();
}
},
done: function (e, data) {
console.log(data.result);
if(parseInt(data.result.error) == 0){
if($("#pic_container li").size() < 6){
$("#pic_container").append(
'<li class=" fl img_in">'
+'<img style="width:99px;height:99px" src="'+data.result.url+'">'
+'<input type="hidden" name="criticPictures[]" value="'+data.result.url+'" />'
+'<div class="close">'
+'<img style="cursor: pointer;" src="/public/images/comment/comment_close.png">'
+'</div>'
+'</li>'
);
}else{
alert(" ");
return false;
}
}
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
バックグラウンドコード:
$post = array();
$post['resourceType'] ='comment_image';
$post['resourceId'] = 1 ;
$post['getImageInfo'] = 'true' ;
$post['comment_image_file'] = '@'.$_FILES['comment_image_file']['tmp_name'].';filename='.$_FILES['comment_image_file']['name'].';type='.$_FILES['comment_image_file']['type'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,CONFIG::get('api.loupanCommentImageUpload'));
curl_setopt($ch, CURLOPT_POST,true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_exec ($ch);
curl_close ($ch);
Curlでファイルをアップロードする