Member Avatar for OsaMasw

I want to implement simple file upload with progress
I like the services provides by jQuery-File-Upload
I tested the example provided with script

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
    height: 18px;
    background-image: url('img/progressbar.gif');
}
</style>
</head>
<body>
<input type="text" name="textfield" /> title
<input id="fileupload" type="file" name="files[]" data-url="upload.php" >
<a href="#" id="upload" >Upload</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>

    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });

</script>

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
</body> 
</html>

the code works perfectly when user select file, but I need the following settings

  • Upload file when click on upload button.
  • save information provided with the file in mysql db.
  • upload a second picture along with main file.
  • limit the items to only one file per upload.
  • show upload status ( KB up - time remaining ).
Edited by OsaMasw
  • 3 Contributors
  • 7 Replies
  • 668 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by OsaMasw
Member Avatar for LastMitch

but I need the following settings

I think you made one minor mistake.

You didn't provide any PHP code with your Jquery code.

I mean I hope you don't expect someone to write this much code:

Upload file when click on upload button.
save information provided with the file in mysql db.
upload a second picture along with main file.
limit the items to only one file per upload.
show upload status ( KB up - time remaining ).

I mean if you did have some PHP code that you have been working on then post what you have.

Edited by LastMitch because: grammer
Member Avatar for diafol
  1. Upload file when click on upload button.
  2. save information provided with the file in mysql db.
  3. upload a second picture along with main file.
  4. limit the items to only one file per upload.
  5. show upload status ( KB up - time remaining ).

The demo version of the file upload (BlueImp) does 1, 5.
3,4 seem to contradict each other
2 is server-side handling

This is a considerable amount of info. I realise that you didn't just post this, sat back and are waiting for somebody to do all the work for you, so perhaps you could focus on ONE question to begin with? In addition, show any code that you tried, so we can try to guide you through it.

Member Avatar for OsaMasw

am Sorry for this mistake, I have the php code and its working as I need, but am asking how to implement jQuery plugin with my script\

<?php
include ("config.php");
if ($_POST) {
// "filter" to remove all unwanted charachter from text
$title = filter($_POST['title']);
$info = filter($_POST['info']);
$cat = filter($_POST['cat']);
$siduser = filter($_POST['sid']);
$time = date("Y-m-d H:i:s");

//for file
$fileName = $_FILES["files"]["name"]; // The file name
$fileTmpLoc = $_FILES["files"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["files"]["type"]; // The type of file it is
$fileSize = $_FILES["files"]["size"]; // File size in bytes
$extfile = pathinfo($_FILES['files']['name'], PATHINFO_EXTENSION);

// for pic
$fileNamepic = $_FILES["filepic"]["name"]; 
$fileTmpLocpic = $_FILES["filepic"]["tmp_name"]; 
$fileTypepic = $_FILES["filepic"]["type"]; 
$fileSizepic = $_FILES["filepic"]["size"]; 
$fileErrorMsgpic = $_FILES["filepic"]["error"]; 
$extpic = pathinfo($_FILES['filepic']['name'], PATHINFO_EXTENSION);

// error handling Here is too long :P.
// checking filename and other thing from extension to size.

$hash = date("YmdHis");
$fileName = preg_replace( '/[\x7f-\xff -]/', '', $fileName );
$fileName = $hash."-".$fileName ;
if ($fileNamepic != "" ) {
$fileNamepic = $hash.".".$extpic;
// copy picture with copy_marked to add watermark on it
copy_marked($fileTmpLocpic,"$fileNamepic,$fileTypepic);
} else {
$fileNamepic = "default.jpg";
}
// copy file to server.
move_uploaded_file($fileTmpLoc, "files/$fileName");
// add information to database with function "upload_me".
upload_me ($cat,$siduser,$title,$info,$fileSize,$fileNamepic,$fileName,$time,0);

// Check to make sure the uploaded file is in place where you want it
if (!file_exists("files/$fileName")) {
    echo("File not uploaded");

}
// Display things to the page so you can see what is happening for testing purposes
echo("uploadsuccess");
}
?>
Member Avatar for diafol 
copy_marked($fileTmpLocpic,"$fileNamepic,$fileTypepic);

There seems to be an error here - I'm assuming that there shouldn't be a quote in the parameter list.

This link may address your questions - see the bottom of the page:

https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

Member Avatar for OsaMasw

its not an error its just a typo,
I read the wiki setup, I dont get it, how to specify allowed extensions ? and I want a trigger to upload , how this can be done in Ajax ?

Member Avatar for diafol

PHP
You can limit the upload with getting the extension from pathinfo(), but maybe safer, you can use finfo_open() to get the mime type. If you're just getting images though, maybe the exif_imagetype()

On the wiki link you need to read this section:

Using jQuery File Upload (UI version) with a custom server-side upload handler

Member Avatar for OsaMasw

Using jQuery File Upload (UI version) with a custom server-side upload handler

read that part and did every step on it, and when its come to set output to json
here I stop :(, from my above upload script how to set output to json ??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.