Today, we will learn about how to make upload form using Extjs and php such as image (photo) upload and text file (article) upload. My opinion, upload form is very important on website, for example when saving the data to database such as guestbook and submitting article. I think this tutorial have been created by another person, but here i will try to explain it by my self, you can also look this tutorial on extjs.com. i am using combination of extjs and php.

This is the screen shot of this tutorial.

Steps of this tutorial are as folow

First step is create table in database, name of table of this tutorial is uploadf

CREATE TABLE IF NOT EXISTS `uploadf` (
`id` int(11) NOT NULL auto_increment,
`namalaporan` varchar(100) NOT NULL,
`namaFile` varchar(100) NOT NULL,
`photo` varchar(100) NOT NULL,
`date` varchar(100) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  ;

Second step is Create a php file to connection to the database, name of database of this tutorial is defafe

$nameserver = "localhost";
$username = "root";
$password = "";
$dbname = "defafe";
mysql_connect($nameserver,$username,$password)or die('error'.mysql_error());
mysql_select_db($dbname);
?>

Third step is create html file to call or load  javascript and css files

//file-upload.css and FileUploadField can be found here ext-2.2\examples\form

After that create a javascript file to make  upload form, the fields of this form are Filename, Fileconten, photo, and date.  The most important of this script is “xtype: ‘fileuploadfield’,”

Ext.onReady(function(){

Ext.QuickTips.init();
var fp = new Ext.FormPanel({
fileUpload: true,
width: 320,
frame: true,
//height:170,
autoheight:true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 60,
defaults: {
anchor: '95%',
//allowBlank: false,
msgTarget: 'side'
},
items: [

{
xtype: 'textfield',
name: 'Filename',
fieldLabel: 'File Name '
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select an file',
fieldLabel: 'File',
name: 'Fileconten',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
},
{
xtype: 'fileuploadfield',
id: 'form-file1',
emptyText: 'Select an image',
fieldLabel: 'Image',
name: 'photo',
buttonCfg: {
text: '',
iconCls: 'upload-icon' //usuing icon on  browse button.
}
},
{
xtype: 'datefield',
fieldLabel: 'Date',
anchor: '95%',
name: 'date',
format: 'm/d/Y'
}
],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'phpupload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o){ //if success
Ext.MessageBox.alert('Creation OK','uplaoding data success..');

},
failure: function(fp, o){ //if not success
Ext.MessageBox.alert('Warning','failure uploading data...');
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});

var createwindow = new Ext.Window({

title:'Form Upload',
width:315,
height:190,
closable: false,
items: fp
});
createwindow.show();

});

Finally create php file to process data, to post to the databse, the image types  of this tutorial are gif, jpeg, x-png.

include "koneksi.php";
$Filename = $_POST['Filename'];
$Fileconten= $_FILES['Fileconten']['name'];
$Photoname = $_FILES['photo']['name'];
$date = $_POST['date'];

if ($_FILES['photo']['type'] == "image/gif" || $_FILES['photo']['type'] == "image/jpeg" || $_FILES['photo']['type'] == "image/x-png")
{
move_uploaded_file ($_FILES['photo']['tmp_name'],"image/".$_FILES['photo']['name']);
move_uploaded_file ($_FILES['Fileconten']['tmp_name'],"artikel/".$_FILES['Fileconten']['name']);
$sql_query= mysql_query("INSERT INTO uploadF (`id`,`Filename`,`Fileconten`,`photo`,`date`) VALUES (null,'$Filename','$Fileconten','$Photoname',now())");
if ($sql_query)
{
echo '{"success":"true"}';
}
else
{
echo '{"success":"false"}';
}
}
?>

Download Source code

Tags: Anchor, Auto Increment, Css Files, Database Name, extjs, Image File, Image Photo, Image Upload, JavaScript, Nameserver, Photo File, Photo Upload, PHP, Php File, Php Image, Php Upload, Programming, Root Password, True Height, True Width, upload file, upload image, Upload Php, Uploading and downloading, Varchar

Incoming search terms for the article:

extjs file upload , extjs upload , extjs upload file , Extjs fileupload , extjs fileuploadfield , file upload extjs , extjs image upload , extjs file upload example , fileuploadfield extjs , extjs upload image , upload extjs , extjs file upload php , upload image extjs , ext file upload , ext js file upload , extjs fileupload example , file upload in extjs , extjs file browser , upload file extjs , extjs multiple file upload , ext js upload , extjs upload form , extjs file uploader , extjs upload php , photo upload in EXTJS , extjs form file upload php , extjs 3 upload , php photo upload tutorial , extjs form file upload , extjs upload example , extjs upload file example , XML tag name mismatch (expected img) , extjs php file upload , extjs ajax file upload , extjs uploadfile , extjs File Upload Field , extjs 3 file upload , extjs image in form , image upload extjs , extjs file upload sample , file upload using extjs , upload file with ext js , extjs image button , extjs image , Upload Files ExtJS , extjs buttonCfg , extjs upload files , extjs upload button , extjs form upload image , extjs user file file upload php extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs login form , extjs grid paging exjs file upload , getForm() load({url:simplegrid php?act=get&id= m[0] get(id) waitMsg:Loading}); , extjs get grid row height , submit grid checkbox extjs , extjs grid checkbox submit , extJS login demo not work in 3 1 , upload xls file using extjs , extjs CheckboxSelectionModel color , extjs form load callback , upload file extjs tutorial 

This entry was posted by faisal at on Friday, February 20th, 2009 at 7:24 pm and is filed under Tutorial Extjs, Tutorial HTML, Tutorial PHP, Tutorial mysql. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.